How to keep xlink:href working after base64 encode

Question

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:

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

Robert Longson · Accepted Answer · 2016-11-13T22:22:39.770

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.

How to keep xlink:href working after base64 encode

1 Answers1