HTML形式のSVG要素を使用するクリーナーの方法は？

Question

私はさまざまなHTML要素の下にあるいくつかのSVG要素を持っています。下の例で分かるように、彼らは多くのスペースをとり、HTMLを混乱させます。

誰かがこの問題を解決する最善の方法について何か提案しているのだろうかと思います。 SVG要素ごとに部分的なHTMLビューを使用することもできますが、それは少しオーバーボードであり、私が考えることができるすべてです。

<div id="canvasControl" class="cnvsControl" hidden="hidden" style="height:36px; background-color:black; position:relative;margin-top:-36px;z-index:9999;opacity: 0.2;"> 
    <div class="imageUpload canvasControlButton alignLeft" style="height:36px; position:relative;" title="Open File" id="btnOpenFile" name="btnOpenFile" onclick="snes_readfile(this)"> 
     <label for="btnFileImport" style="position:absolute;top:5px;"> 
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512"> 
       <g id="icomoon-ignore"></g> 
       <defs> 
        <path id="openFolder1" d="M416 480l96-256h-416l-96 256zM64 192l-64 288v-416h144l64 64h208v64z"></path> 
       </defs> 
       <use fill="#fff" xlink:href="#openFolder1"></use> 
      </svg> 
     </label> 
     <input id="btnFileImport" type="file" onchange="snes_readfile(this)" /> 
    </div> 
    <button class="canvasControlButton alignRight" title="Full screen" id="btnFullScreen" name="btnFullScreen"> 
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512"> 
      <g id="icomoon-ignore"></g> 
      <defs> 
       <path id="outFullArrow1" d="M512 0h-208l80 80-96 96 48 48 96-96 80 80z"></path> 
       <path id="outFullArrow2" d="M512 512v-208l-80 80-96-96-48 48 96 96-80 80z"></path> 
       <path id="outFullArrow3" d="M0 512h208l-80-80 96-96-48-48-96 96-80-80z"></path> 
       <path id="outFullArrow4" d="M0 0v208l80-80 96 96 48-48-96-96 80-80z"></path> 
      </defs> 
      <use fill="#fff" xlink:href="#outFullArrow1"></use> 
      <use fill="#fff" xlink:href="#outFullArrow2"></use> 
      <use fill="#fff" xlink:href="#outFullArrow3"></use> 
      <use fill="#fff" xlink:href="#outFullArrow4"></use> 
     </svg> 
    </button> 
    <button class="canvasControlButton alignRight" title="Bigger Screen" id="btnChangeScreenSize" name="btnChangeScreenSize"> 
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512"> 
      <g id="icomoon-ignore"></g> 
      <defs> 
       <path id="outArrow1" d="M512 0v208l-80-80-96 96-48-48 96-96-80-80zM224 336l-96 96 80 80h-208v-208l80 80 96-96z"></path> 
      </defs> 
      <use fill="#fff" xlink:href="#outArrow1"></use> 
     </svg> 
    </button> 

Answer 1

あなたは別のSVGファイルを作成し、このようにHTMLドキュメントにリンクすることができます

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512"> 
      <g id="icomoon-ignore"></g> 
      <defs> 
       <path id="openFolder1" d="M416 480l96-256h-416l-96 256zM64 192l-64 288v-416h144l64 64h208v64z"></path> 
      </defs> 
      <use fill="#fff" xlink:href="#openFolder1"></use> 
     </svg> 

2：

は

one.svgという名前SVGファイルを作成します。 .svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512"> 
     <g id="icomoon-ignore"></g> 
     <defs> 
      <path id="outFullArrow1" d="M512 0h-208l80 80-96 96 48 48 96-96 80 80z"></path> 
      <path id="outFullArrow2" d="M512 512v-208l-80 80-96-96-48 48 96 96-80 80z"></path> 
      <path id="outFullArrow3" d="M0 512h208l-80-80 96-96-48-48-96 96-80-80z"></path> 
      <path id="outFullArrow4" d="M0 0v208l80-80 96 96 48-48-96-96 80-80z"></path> 
     </defs> 
     <use fill="#fff" xlink:href="#outFullArrow1"></use> 
     <use fill="#fff" xlink:href="#outFullArrow2"></use> 
     <use fill="#fff" xlink:href="#outFullArrow3"></use> 
     <use fill="#fff" xlink:href="#outFullArrow4"></use> 
    </svg> 

<div id="canvasControl" class="cnvsControl" hidden="hidden" style="height:36px; background-color:black; position:relative;margin-top:-36px;z-index:9999;opacity: 0.2;"> 
    <div class="imageUpload canvasControlButton alignLeft" style="height:36px; position:relative;" title="Open File" id="btnOpenFile" name="btnOpenFile" onclick="snes_readfile(this)"> 
     <label for="btnFileImport" style="position:absolute;top:5px;"> 
      <object> 
      <embed scr="one.svg"> 
     </object> 
     </label> 
    <input id="btnFileImport" type="file" onchange="snes_readfile(this)" /> 
</div> 
<button class="canvasControlButton alignRight" title="Full screen" id="btnFullScreen" name="btnFullScreen"> 
    <object> 
     <embed scr="two.svg"> 
    </object> 
</button> 
<button class="canvasControlButton alignRight" title="Bigger Screen" id="btnChangeScreenSize" name="btnChangeScreenSize"> 
    <object> 
     <embed scr="three.svg"> 
    </object> 
</button> 

はそれが助けを願って、それはあなたの問題を解決するかどう答えを検証することを忘れないでください：

three.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25" viewBox="0 0 512 512"> 
     <g id="icomoon-ignore"></g> 
     <defs> 
      <path id="outArrow1" d="M512 0v208l-80-80-96 96-48-48 96-96-80-80zM224 336l-96 96 80 80h-208v-208l80 80 96-96z"></path> 
     </defs> 
     <use fill="#fff" xlink:href="#outArrow1"></use> 
    </svg> 

は、その後に、あなたのHTMLを編集します。