In this tutorial I will show you how you can make an SVG to automatically stretch to the viewport size. This allows the SVG to be rendered at the optimal size of every screen without causing aliasing.
First you should remove any borders around the actual graphics from the SVG file. I recommend using the free vector graphics editor Inkscape. To do that open the SVG file in Inkscape and click on File -> Document Settings. Now click on the right button next to the caption „Resize page to content“ and then save the SVG file.
Open the SVG file with a text editor and add the viewBox property to the svg tag. Set its value to
0 0 <width> <height>where <width> is the placeholder for the value of the width of the drawing and <height> is the placeholder for the height. You can copy the values from the width and height properties of the svg tag.
Now set the width property and the height property to 100%. Your svg file should now look similar like this:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Circuit Diagram, cdlibrary.dll 4.0.0.0 -->
<svg
version="1.1"
width="100%"
height="100%"
viewBox="0 0 251.41992 161.00406"
...
</svg>