Vladimir Lisovets Vladimir Lisovets - 26 days ago 9
CSS Question

How to keep <image> xlink:href working after base64 encode

I am using

SVG
encoded as
base64
to be displayed in my
.html
page.

I have been using basic shapes with
fill
, but now,
I am trying to use a SVG with a background image which is applied at the following line:

<image overflow="visible" width="650" height="882" xlink:href="<path>" transform="matrix(0.266 0 0 0.266 1.04 0)">


And below is the whole
svg
:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="175px" height="199.55px"
viewBox="0 0 175 199.55" enable-background="new 0 0 175 199.55" xml:space="preserve">
<metadata>
</metadata>
<g id="Capa_2">
</g>
<g id="Capa_1">
<g>
<defs>
<path id="svg_1" d="M78.854,4.932c5.764-3.328,11.528-3.328,17.292,0l69.168,39.934c5.764,3.328,8.646,8.32,8.646,14.976v79.867
c0,6.656-2.883,11.648-8.646,14.976l-69.168,39.935c-5.764,3.327-11.528,3.327-17.292,0L9.686,154.684
c-5.764-3.327-8.646-8.319-8.646-14.976V59.841c0-6.656,2.882-11.647,8.646-14.976L78.854,4.932z"/>
</defs>
<clipPath id="svg_1_1_">
<use xlink:href="#svg_1" overflow="visible"/>
</clipPath>
<g transform="matrix(1 0 0 1 6.741370e-008 0)" clip-path="url(#svg_1_1_)">
<image overflow="visible" width="650" height="882" xlink:href="/assets/img/hexagon/1b9a4fb722.jpg" transform="matrix(0.266 0 0 0.266 1.04 0)">
</image>
</g>
</g>
</g>
</svg>


Later, already encoded to
base64
,
css
will look like this:

/* file size: 1.9ko | optimized file size: 1.7ko | base64 size: 2.2ko */
.doubleduecemenu {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiIFs8IUVOVElUWSBuc19leHRlbmQgImh0dHA6Ly9ucy5hZG9iZS5jb20vRXh0ZW5zaWJpbGl0eS8xLjAvIj48IUVOVElUWSBuc19haSAiaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIj48IUVOVElUWSBuc19ncmFwaHMgImh0dHA6Ly9ucy5hZG9iZS5jb20vR3JhcGhzLzEuMC8iPjwhRU5USVRZIG5zX3ZhcnMgImh0dHA6Ly9ucy5hZG9iZS5jb20vVmFyaWFibGVzLzEuMC8iPjwhRU5USVRZIG5zX2ltcmVwICJodHRwOi8vbnMuYWRvYmUuY29tL0ltYWdlUmVwbGFjZW1lbnQvMS4wLyI+PCFFTlRJVFkgbnNfc2Z3ICJodHRwOi8vbnMuYWRvYmUuY29tL1NhdmVGb3JXZWIvMS4wLyI+PCFFTlRJVFkgbnNfY3VzdG9tICJodHRwOi8vbnMuYWRvYmUuY29tL0dlbmVyaWNDdXN0b21OYW1lc3BhY2UvMS4wLyI+PCFFTlRJVFkgbnNfYWRvYmVfeHBhdGggImh0dHA6Ly9ucy5hZG9iZS5jb20vWFBhdGgvMS4wLyI+XT48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM6eD0iJm5zX2V4dGVuZDsiIHhtbG5zOmk9IiZuc19haTsiIHhtbG5zOmdyYXBoPSImbnNfZ3JhcGhzOyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxNzVweCIgaGVpZ2h0PSIxOTkuNTVweCIgdmlld0JveD0iMCAwIDE3NSAxOTkuNTUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE3NSAxOTkuNTUiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxtZXRhZGF0YT48L21ldGFkYXRhPjxnIGlkPSJDYXBhXzIiPjwvZz48ZyBpZD0iQ2FwYV8xIj48Zz48ZGVmcz48cGF0aCBpZD0ic3ZnXzEiIGQ9Ik03OC44NTQsNC45MzJjNS43NjQtMy4zMjgsMTEuNTI4LTMuMzI4LDE3LjI5MiwwbDY5LjE2OCwzOS45MzRjNS43NjQsMy4zMjgsOC42NDYsOC4zMiw4LjY0NiwxNC45NzZ2NzkuODY3YzAsNi42NTYtMi44ODMsMTEuNjQ4LTguNjQ2LDE0Ljk3NmwtNjkuMTY4LDM5LjkzNWMtNS43NjQsMy4zMjctMTEuNTI4LDMuMzI3LTE3LjI5MiwwTDkuNjg2LDE1NC42ODRjLTUuNzY0LTMuMzI3LTguNjQ2LTguMzE5LTguNjQ2LTE0Ljk3NlY1OS44NDFjMC02LjY1NiwyLjg4Mi0xMS42NDcsOC42NDYtMTQuOTc2TDc4Ljg1NCw0LjkzMnoiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJzdmdfMV8xXyI+PHVzZSB4bGluazpocmVmPSIjc3ZnXzEiICBvdmVyZmxvdz0idmlzaWJsZSIvPjwvY2xpcFBhdGg+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSA2Ljc0MTM3MGUtMDA4IDApIiBjbGlwLXBhdGg9InVybCgjc3ZnXzFfMV8pIj48aW1hZ2Ugb3ZlcmZsb3c9InZpc2libGUiIHdpZHRoPSI2NTAiIGhlaWdodD0iODgyIiB4bGluazpocmVmPSJodHRwOi8vZGwxLmpveGkubmV0L2RyaXZlLzIwMTYvMDYvMjUvMDAxNC8xMDkxLzk1MTM2My82My8xYjlhNGZiNzIyLmpwZyIgIHRyYW5zZm9ybT0ibWF0cml4KDAuMjY2IDAgMCAwLjI2NiAxLjA0IDApIj48L2ltYWdlPjwvZz48L2c+PC9nPjwvc3ZnPg==);
}




Problem:

Encoded
base64
does not find the
image
that I used in the SVG.



Considerations


  • SVG as
    html
    works perfectly

  • Tried to use the image from the local server and from a hosting url

  • Tried to encode the path in the
    svg
    <image>
    to
    base64

  • I would accept any tip, and yet a solution that involves the use of
    svg
    without encoding it, however, I prefer to avoid it as far as possible.






Yet, That's how it is supposed to look like:

enter image description here



Thank you!
I do appreciate your time reading and thinking on this issue.

Answer

If SVG is used in an image context i.e. via an html <img> tag or as a CSS background image then it must be complete in a single file, otherwise you have a privacy leak.

If you change the image in the SVG into an internal data URL you'll find it works in Chrome and Firefox. If you imagine that the capabilities of SVG as an image are similar to raster images you won't go far wrong, after all raster images consist of a single file.

Once you've done that you can then turn the SVG file itself into the data URL just as you do now.