Scalable Vector Graphics
Or SVG for short is an XML based vector image format. It differs from PDF or JPG raster based formats by not referencing pixels and instead storing the image data as geometric shapes. This makes SVGs better for images that need to be scalable.
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1096 958"><defs><style>.cls-1{fill:#fcee21;}.cls-1,.cls-2,.cls-3,.cls-4{stroke:#000;stroke-miterlimit:10;stroke-width:5px;}.cls-2{fill:#0071bc;}.cls-3{fill:#b53a3a;}.cls-4{fill:none;}</style></defs><rect class="cls-1" x="2.5" y="50.5" width="561" height="543"/>
<rect class="cls-2" x="272.5" y="94.5" width="561" height="543"/><rect class="cls-3" x="369.5" y="412.5" width="561" height="543"/><rect class="cls-4" x="53.5" y="365.5" width="561" height="543"/><rect class="cls-4" x="532.5" y="2.5" width="561" height="543"/></svg>
Here is the XML code for the above image surprisingly VScode has this as a .svg file (I thought it would have been .xml). Also when changing the code in VScode it also changed how the image renders in the browser in real time
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1096 958"><defs><style>.cls-1{fill:#fcee21;}.cls-1,.cls-2,.cls-3,.cls-4{stroke:#000;stroke-miterlimit:10;stroke-width:5px;}.cls-2{fill:#0071bc;}.cls-3{fill:#b53a3a;}.cls-4{fill:none;}</style></defs><rect class="cls-1" x="2.5" y="50.5" width="56" height="54"/>
<rect class="cls-2" x="272.5" y="94.5" width="56" height="54"/>
<rect class="cls-3" x="369.5" y="412.5" width="56" height="54"/><rect class="cls-4" x="53.5" y="365.5" width="56" height="54"/>
<rect class="cls-4" x="532.5" y="2.5" width="56" height="54"/>
</svg>
Seeing as XML has a lot of similarities with HTML it I feel at home messing with width and height attributes inside a ‘rect’ tag. Additionally since an .svg file is XML the image can be edited, animated, or other effects can added with CSS and JavaScript.
On another note the small file size is great for quick rendering. If I was not already settled on a mod 5 project trying to create a supper budget version of adobe photoshop would have been good project (maybe a job hunt project).