Short Story of SVG

SVG stands for Scalable Vector Graphics, a graphics extension that is becoming the supreme solution for logos, icons, and many other vector graphics on the web and in mobile applications.

So, what are SVGs are they so popular and important now a days? SVGs are Scalable Vector Graphics so it can be rendered in any size and resolution. It can be created by drawing vectors that have strokes and fills.

It no longer matters what the display size is or what the display resolution. The graphic will always clear and correctly scaled. While bitmaps are compiled image formats, SVGs are XML markup documents that live in the browser alongside the other HTML markup. That means SVG graphics are made of elements of the browser document's object model, and we can interact with them just like we interact with any other DOM element using CSS and JavaScript.

Yap, you heard that right. You can control SVGs CSS and JavaScript. And that is why it is very trending thing which every graphic artist should know.

Why Use SVG?

  • Scales to any size without losing quality
  • Small file sizes and compression also works well
  • Looks good on retina displays
  • Design control with CSS and JS like interactivity and filters

Get the Most from the SVG in Web

Let’s design something in Adobe Illustrator. It's a Kiwi bird

https://css-tricks.com/wp-content/uploads/2013/03/kiwi.png

Notice the artboard is fitted against the edges of the design. Canvas size matters in SVG like it does in PNG or JPG.

You can save or export as SVG directly from Adobe Illustrator as an SVG file.

https://css-tricks.com/wp-content/uploads/2013/03/save-as-svg.png

When you save it, you'll get a dialog for SVG Options. I don't know much about this. There is a whole spec for SVG Profiles. I found SVG 1.1 works fine.

https://css-tricks.com/wp-content/uploads/2013/03/svg-options.png

The interesting part here is that you can either press OK and save the file, or press "SVG Code" and it will open with a text editor (on a Mac also) with the SVG code in it.

https://css-tricks.com/wp-content/uploads/2013/03/svg-code.png

Both can be useful.

Using SVG as an <img>

If I save the SVG as a file type, I can use it directly in an <img> tag.

<img src="KIWI.svg" alt="Kiwi ">

In Illustrator, our artboard was 612px ✕ 502px.

https://css-tricks.com/wp-content/uploads/2013/03/artboard.png

That's exactly the image resolution will on the page, left to itself. You can change the size of it though just by selecting the <img /> and changing its width or height. Here is an example.

Browser Dependency of SVG as an <img>

It supports every browser except IE 8 & its lower version; and Android 2.3 & its lower version.

If you'd like to use SVG, but also need to support these browsers that don't support using SVG in this way, you have options.

One way is to test for support with Modernizr and swap out the src of the image:

if (!Modernizr.svg) {
(".logo img").attr("src", "images/logo.png");
}

if you're OK with js in the markup:

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

Using SVG as Background-image

Similarly, SVG as <img>, you can use it in CSS as a background-image.

<a href="/" class="logo">
Kiwi Corp
</a>
.logo {
display: block;
text-indent: -8999px;
width: 120px;
height: 92px;
background: url(KIWI.svg);
background-size: 100px 82px;
}

Browser Dependency of SVG as Background-image

There are issues with browsers are IE 8 & down and Android 2.3 & down.

Modernizr can help us in that case. If we can replace the background-image with a supported format, only one HTTP request will be made instead of two. Modernizr adds a class name of "no-svg" to the html element if it doesn't support SVG, so we can use that:

.header-logo {
background: url(logo.svg) no-repeat top left;
background-size: contain;
}
.no-svg .header-logo {
background-image: url(logo.png);
}

Another nice technique for using SVG as background-image is by using it in conjunction with multiple backgrounds. If the browsers support multiple backgrounds, it will support SVG.

logo {
background: url(background.png);
background-image: url(logo.svg), none;
}

Optimization of SVG for WEB

SVG that Adobe Illustrator gives us isn't optimized at all. It has junk lines about DOCTYPE and generator notes. Here is an online SVG Optimizer tool. Upload the old SVG, download the new.

If you are good with Node.js, here is a Node JS tool for you.

Now you can even control it with CSS!

See now that SVG looks more like HTML! HTML and SVGs are mainly XML. In our design, we have two elements that make up the design, an <ellipse> and an <path>. We can edit the code and add class names, just like any other HTML code can have.

<svg ...>
<ellipse class="ellipse" .../>
<path class="miwi" .../>
</svg>

Now in any CSS on this page we can select those elements with CSS. This CSS doesn't have to be inline in the SVG itself, it can be any place like our global stylesheet <link>ed up.

.KIWI {
fill: #943e31b;
}
.KIWI:hover {
fill: #ade63c;
}

Even, SVG has so many fancy filters. For Gaussian blurring. Check a filter in your <svg>:

<svg ...>
...
<filter id="imgFilter" >
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>

Then we can apply that in our CSS:

.ground:hover {
filter: url(#pictureFilter);
}

Here's an example on the code pen:

You can comment below if you face any problem implementing SVG.

Here’s all for now. Will come back with more tips on trending things next time. Thank You All.