mgmedick mgmedick - 7 months ago 11
HTML Question

Cleaner way to use HTML SVG elements?

I have several SVG elements that are under various HTML elements. As you can see in the example below they take up a lot of space and clutter the html.

I'm wondering if anyone has any suggestions on the best way to clean this up. I could use partial HTML views for each SVG element, but that's a bit overboard and all I can think of.

<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

You can create seperate the SVG file and then link it to your HTML doucment like this:

Create an SVG file named

one.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="openFolder1" d="M416 480l96-256h-416l-96 256zM64 192l-64 288v-416h144l64 64h208v64z"></path>
            </defs>
            <use fill="#fff" xlink:href="#openFolder1"></use>
        </svg>

two.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>

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>

Then edit you HTML to :

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

Hope it helped and don't forget to validate the answer if it's resolve your issue.

Comments