SVG

Posted on September 2, 2022

Tags: javascript

<?xml version="1.0" encoding="iso-8859-1"?>

<svg>
<!-- SVG asset 1 -->
    <symbol id="bleh" x="2.5vh" y="8.5vh" 
    width="5vw" height="5vh" 
    viewBox="0 0 50 20" style = "filter:invert(100)" 
    xmlns="http://www.w3.org/2000/svg">>
        <g>
            <path d="...">
            <path d="...">
        </g>
    </symbol>
    
<!-- SVG asset 2 -->
    <symbol id="hilo"> 
        ...
    </symbol>
</svg>

<svg><use href = "/spritesheet.svg#bleh" ></use></svg>
<svg><use href = "/spritesheet.svg#hilo" ></use></svg>

1 symbol

Instead of having multiple .svg files we can combine all of them into one .svg file
Each <symbol> is a separate svg graphic
- Just swap <svg> tag to <symbol> to convert individual .svg
To use the symbol svg in your HTML doc:
- <svg><use href= "...svgsheet.svg#theIDname>

2 position

move the entire svg using x y
- <symbol...x="2.5vh" y="8.5vh"

3 viewBox for Panning Zooming

viewBox DOES NOT move the position of the SVG
viewBox only allows zooming and panning of the current svg
- viewBox=" panRight panDown zoomOutWidth zoomOutHeight"
  - 1st param: Increase/Decrease => Pan Right/Left
  - 2nd param: Increase/Decrease => Pan Down/Up
  - 3rd param: Increase/Decrease => Zoom Out/In width
  - 4rth param: Increase/Decrease => Zoom Out/In height

4 Group g

<g> stands for group which lets us group <path> elements
- <path> elements hold the drawings

5 pixel to vw,vh

say you have 66px height element and want to convert it to vh
- 100*66/window.outerHeight