Living with SVG
Ever doodle on a napkin and create something magical? A unicorn with roller-skates, or an orange reading the paper while eating a banana? You know, random things that jot down while you’re talking to your mom on the phone? Now imagine transferring these things to your computer as digital representations of your napkin. Its a beautiful thing. Now imagine building a website portfolio and adding these images to your website in a vector format that is flexible and responsive to your billion different devices. Infinite magic is what I’m talking about people.
SVG (Scalable Vector Graphics) is based on XML which makes it pretty readable if you already understand HTML.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="513.139px" height="189.051px" viewBox="0 0 513.139 189.051" enable-background="new 0 0 513.139 189.051"
xml:space="preserve">
<rect x="9.489" y="17.168" fill="#E94524" stroke="#000000" stroke-width="3" stroke-miterlimit="10" width="248.905" height="156.205"/>
<circle fill="#F5F5F5" stroke="#000000" stroke-width="3" stroke-miterlimit="10" cx="416.423" cy="95.27" r="79.927"/>
</svg>If you look at the snippet above, you can see that it is just a rectangle and a circle, as pictured below.
<rect …..> has an x and y axis set along with the fill and stroke.
<circle ….> also has a x and y axis, but is set as cx and cy. In addition, the r that you see is the radius of the circle.
Plain ‘ol HTML/CSS can build out a rectangle and a circle, but what about more complex vector graphics? What if you wanted to build a graphic of your own head, and raise an eyebrow when someone hovered over it? What if you wanted to set a mask over a video, or build something for your favorite holiday, or make something funny that people will get a kick out of??
All of these things can be achieved nicely with SVG, and gives you so much flexibility on how you can animate or modify them.
SVG is used a lot with CSS3 and JavaScript. Libraries like D3, WebGL, and HTML5 Canvas are great tools to utilize the flexibility of SVGs. Yes, there is a steep learning curve, but like anything worth doing, it isn’t easy.
Did you know that you can use vector graphic editors like Adobe Illustrator, Affinity, Sketch and many others are great tools to design your vector graphic and save out as SVG files? This can save you a lot of time and allow you the freedom to get as creative as you want.
Size matters!
SVG files are great for your website, and becoming more common everyday. Lets take this image for our example.
This is a vector image I made of one of my amazing puppies. As a .jpg this image as 27kb, and when I saved it as a .svg it was down to 19kb. That may seem like a small difference, and if you are building a small website it is really insignificant. However, imagine how much space will be saved in websites that rely on their graphics. This one image that is 363px X 236px can save 8kb. That will really add up fast!
SVG is not always the right way to go.
There are going to be times that you probably shouldn’t use an svg. If you are looking to ensure that older browser versions support your svg files, you will need to plan ahead. IE8 and older do not support SVG.
If you have an image gallery of your family and your dogs, those images should probably just be .jpg or .gif. There is really no need to save a photo of Spot to an .svg format, although in any format, I bet Spot is a pretty boy!
