using SVG on your web

SVG Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Because of its scalable native, especially with very high graphical screens(example: retinal screen for Mac) these days, we need solutions for images or graphics to be display on these screens.

Well these are many ways to resolve these, such as using large image 2x of your current size and scale down to smaller dimension on web, or for icons we use Font-icons. Since SVG was widely used on most modern browsers including IE9, and its pretty lightweight we should make use of it.
How we can use SVG on the web and why we will use it.

We can include/embed svg like what we do to images.

With HTML, we can include as an image or XML code, for example:

<img src=“mysvgfile.svg” alt=“svg file” /> // if you need to scale add width and height…

or you want to use XML, the good part using xml is you have control over some svg settings such as fill, colors and so on…

Well, one thing you need to make sure when you are using xml is that if your web page contains multiple same svg that I would suggest you embed them as image because the image file will only be downloaded 1 time, whereas xml will add more weights to html when it was downloaded from server.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
  <path fill=“red” d="M12 3C8.032 3 7 4.8 7 7.8c1.642-3 4.157-2.795 5-2.795V3zm0-2v6l3-3-3-3z"></path>
  
  <path fill=“green” d="M14 7v4c0 1.113-.9 2-2.01 2H4.01C2.9 13 2 12.105 2 11V5c0-1.113.9-2 2.01-2H7.2c-.597.56-1.05 1.23-1.384 2H4v6h8V9l2-2zm-3-2h-.04l.04-.01V5z"></path>
</svg>

SVG can also be included from css side like what we did to images normally.

.container {
  background:url(mysvgfile.svg) no-repeat;
  background-size:100px 100px; // adjust svg size
  width:100px;
  height:100px;
}

Alternatively we can also include svg as xml from css:

.container {
  background: url("data:image/svg+xml;utf8,") no-repeat;
  background-size:100px 100px; // adjust svg size
  width:100px;
  height:100px;
}

Well this works well in most browsers, however Internet Explorer refuses to work with it, so we need to convert them into base64, you can read more about base64 on: http://stackoverflow.com/questions/201479/what-is-base-64-encoding-used-for

.container {
  background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAiPjwvY2lyY2xlPjwvc3ZnPg==") no-repeat;
  background-size:100px 100px; // adjust svg size
  width:100px;
  height:100px;
}

There are many svg to base64 convertor out there, one of it I use it a lot is: https://dopiaza.org/tools/datauri/index.php

Optimizing Svg files is rather easy, we mentioned svg is just XML file, so you can open it on Text editors such as sublime and so on, you will see lines of code, and as we all know to reduce file size for code is to keep them into one line, and this apply to SVG too, just convert them into one line and you save 40-70% of file size, or if you want to optimise them in bulk, you can use open source tools “svgo” from github https://github.com/svg/svgo, either in CLI or GUI: https://github.com/svg/svgo-gui