SVGイメージの背景色を変更する方法は？

Question

これは、背景色を現在の白から透明（または黒）に変更する必要があるSVGイメージの例です。
これまでのところ、私は前景色を変更することしかできませんでした。

<svg xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="5 5 90 90" version="1.1" x="0px" y="0px" id="svg14" sodipodi:docname="icon_link.svg" inkscape:version="0.92.1 r15371"> 
 
     <metadata 
 
     id="metadata20"> 
 
     <rdf:RDF> 
 
      <cc:Work 
 
      rdf:about=""> 
 
      <dc:format>image/svg+xml</dc:format> 
 
      <dc:type 
 
       rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 
 
      </cc:Work> 
 
     </rdf:RDF> 
 
     </metadata> 
 
     <defs 
 
     id="defs18" /> 
 
     <sodipodi:namedview 
 
     pagecolor="#ffffff" 
 
     bordercolor="#666666" 
 
     borderopacity="1" 
 
     objecttolerance="10" 
 
     gridtolerance="10" 
 
     guidetolerance="10" 
 
     inkscape:pageopacity="0" 
 
     inkscape:pageshadow="2" 
 
     inkscape:window-width="787" 
 
     inkscape:window-height="620" 
 
     id="namedview16" 
 
     showgrid="false" 
 
     inkscape:zoom="1.888" 
 
     inkscape:cx="50" 
 
     inkscape:cy="62.5" 
 
     inkscape:window-x="262" 
 
     inkscape:window-y="18" 
 
     inkscape:window-maximized="0" 
 
     inkscape:current-layer="svg14" /> 
 
     <title 
 
     id="title2">1</title> 
 
     <desc 
 
     id="desc4">Created with Sketch.</desc> 
 
     <g 
 
     stroke="none" 
 
     stroke-width="1" 
 
     fill="none" 
 
     fill-rule="evenodd" 
 
     sketch:type="MSPage" 
 
     id="g8" 
 
     style="fill:#ff0000"> 
 
     <path 
 
      d="M72.6749171,46.3009857 L27.3261728,46.3009857 L27.3261728,53.9297668 L72.6749171,53.9297668 L72.6749171,46.3009857 Z M84.6466542,29 L63.3361992,29 C57.6266014,29 52.9828534,33.6448379 52.9828534,39.3533458 L52.9828534,41.9416822 L60.6116345,41.9416822 L60.6116345,39.3533458 C60.6116345,37.8504759 61.8333293,36.6287811 63.3361992,36.6287811 L84.6466542,36.6287811 C86.1495241,36.6287811 87.3712189,37.8504759 87.3712189,39.3533458 L87.3712189,60.8774067 C87.3712189,62.3802766 86.1495241,63.6019714 84.6466542,63.6019714 L63.3361992,63.6019714 C61.8333293,63.6019714 60.6116345,62.3802766 60.6116345,60.8774067 L60.6116345,58.2890703 L52.9828534,58.2890703 L52.9828534,60.8774067 C52.9828534,66.5859146 57.6266014,71.2307525 63.3361992,71.2307525 L84.6466542,71.2307525 C90.3551621,71.2307525 95,66.5859146 95,60.8774067 L95,39.3533458 C95,33.6448379 90.3551621,29 84.6466542,29 L84.6466542,29 Z M39.3894553,58.2890703 L47.0182364,58.2890703 L47.0182364,60.8774067 C47.0182364,66.5859146 42.3733986,71.2307525 36.6648907,71.2307525 L15.3533458,71.2307525 C9.64483786,71.2307525 5,66.5859146 5,60.8774067 L5,39.3533458 C5,33.6448379 9.64483786,29 15.3533458,29 L36.6648907,29 C42.3733986,29 47.0182364,33.6448379 47.0182364,39.3533458 L47.0182364,41.9416822 L39.3894553,41.9416822 L39.3894553,39.3533458 C39.3894553,37.8504759 38.1677605,36.6287811 36.6648907,36.6287811 L15.3533458,36.6287811 C13.8504759,36.6287811 12.6287811,37.8504759 12.6287811,39.3533458 L12.6287811,60.8774067 C12.6287811,62.3802766 13.8504759,63.6019714 15.3533458,63.6019714 L36.6648907,63.6019714 C38.1677605,63.6019714 39.3894553,62.3802766 39.3894553,60.8774067 L39.3894553,58.2890703 Z" 
 
    \t fill="none" 
 
      sketch:type="MSShapeGroup" 
 
      id="path6" 
 
      style="fill:#ffff00" 
 
    \t /> 
 
     </g> 
 
    </svg>

成功せずpagecolorを変更しようとしました。

CSSを使用しないでどうすればいいですか？

Answer 1

Inkscapeは肉眼的に肥大化したファイルを生成する傾向がみてください。私が使用しています：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90"> 
 
    <defs> 
 
    <mask id="chain"> 
 
     <rect x="4" y="28" width="34" height="34" fill="black" stroke="white" stroke-width="7" rx="7" /> 
 
     <rect x="52" y="28" width="34" height="34" fill="black" stroke="white" stroke-width="7" rx="7" /> 
 
     <rect x="21" y="39" width="48" height="12" fill="white" stroke="black" stroke-width="4" /> 
 
    </mask> 
 
    </defs> 
 
    
 
    <!-- Uncomment this for manual background --> 
 
    <!--rect fill="#000" width="90" height="90" /--> 
 
    
 
    <rect fill="#ff0" width="90" height="90" mask="url(#chain)" /> 
 
</svg>

あなたがいないだけで、これはあなたのファイルよりも著しく小さい、それは何が起こっているかを見ることも簡単だということに気づくでしょう。ここではあなたのためのクリーンアップバージョンです2つの丸い角の四角形、リンクの矩形、マスクを使用して形状を切り取ります。次に、形状をマスクとして色を塗りつぶして結果を得る。

背景色が定義されていません。画像ファイルとして使用された場合、その背景の背景を明らかにするために透明になります。または、指定した行のコメントを解除して、アイコンの背景を適用することもできます。

Answer 2

この

<svg>に

を style="background-color: #000;"インラインを追加チェックデモ here