保管方法<image> xlink：base64エンコード後のhrefの作業

Question

としてコード化されたSVGを使用しており、.htmlページに表示されます。

私は fillで基本形状を使用してきたが、今、 は、私は次の行に適用された背景画像にSVGを使用しようとしています

：

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

以下、全体でsvg：その後、すでにbase64にエンコード

<?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> 

、cssは次のようになります。

/* 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==); 
} 

問題：

エンコードbase64私はSVGで使用imageを見つけることができません。

考慮事項

• SVG html作品完全
• はローカルサーバから画像を使用しようとホスティングURLから
• はパスをエンコードしようとしたとして、 the svg<image> to base64
• 私は任意のヒントを受け付けますが、svgをエンコードせずに使用するという解決策もありますが、私は可能な限り避けることをお勧めします。

しかし、それはのように見えることになっている方法は次のとおりです。

ありがとうございます！ 私はあなたの時間を読んで、この問題を考えていただきありがとうございます。

Answer 1

SVGがイメージコンテキストで使用されている場合、つまりHTMLの<img>タグを使用するか、CSSの背景イメージとして使用する場合は、1つのファイルで完全にする必要があります。そうしないと、プライバシーリークが発生します。

SVGの画像を内部data URLに変更すると、それはChromeとFirefoxで動作することがわかります。イメージとしてのSVGの機能がラスターイメージに似ていると想像しても、すべてのラスターイメージは1つのファイルで構成されているので間違いはありません。

これを実行したら、今のようにSVGファイル自体をデータURLに変換できます。