Ways to overcome issues for newbie SVG coder

This post is not to argue whether to shift to SVGs or not, obviously we all have to move but what is the situation right now?

Its almost five years that HTML was upgraded to HTML5 but no SVGs today. This is something I felt personally while working on some code that I wasn't able to use SVG instead of icon fonts. I realized a couple of reasons that I wasn't able to opt out the SVG stuff. I've read many tutorials and online stuff about SVG. Developers are insisting to use that because of its great usage and even it is now becoming a target for browsers' developers to put better SVG support.

SVG was introduced as a part of HTML5, it stands for Scalable Vector Graphics. We all know how much great vectors are and how much they better they can facilitate us on web as well. Okay lets get on the topic.

Why To Use SVG?

• They are scalable, means best for logos and icons.
• Can be animated to better level than icon font or image icons.
• They text is indexable by search engine bots.
• Create paths and rounded text or animate them with pure web API.
• Got so many ways to embed.
• A good browser support of IE9 but ways to add fallback for old schools.

You can't put them, you need to code them

SVGs are coded, images and icon fonts are not. When it comes to simple objects like square, circle, rectangle or a simple line. There is no problem with that but when it comes to code some image, its almost impossible to code a complex image with mind.We need software for that, Adobe Illustrator is most popular for that.

Adobe Illustrator is a software to create vector graphics. It was never easy to use that, but if a person wants to shift to SVGs then he need to put effort to learn the whole software which could take weeks to months, depending on your daily learning intake. Well, Mahatma Gandhi said: "Live like you die tomorrow and learn like you live forever". So make it count and start today, if you really wanted to shift.

There are 2 more popular software to create a vector, Inkscape and Indesign. However my first choice is Adobe Illustrator.

Read More: How to create a SVG icon using Adobe Illustrator in 3 simple steps

Better Approach

To tackle out coding problem, an option is to use SVG icons available online. Icon Finder got free icons, image as well as vector. Download them and put them in your site. I've never came across any icon that is not available on Icon Finder.

Adobe Illustrator also imports PSDs and turn layers into objects. This makes vectors easy for those who knows how to use Photoshop. Use Photoshop to make the stuff and use Illustrator to get SVG code. Make your Photoshop skills productive in web.

Its not HTML, its SVG

When you actually kick yourself to start on SVG, the first things comes in your mind is: this is not HTML. Actually yes, its not HTML and doesn't work like HTML in many ways. SVG is part of HTML5 but an SVG canvas got different tags, different properties and different attributes. They work differently in many ways, like SVG got 6 ways to embed in an HTML file, each way got different prospects of working.

SVG got some properties that matches HTML properties like font. But there are many new CSS properties which are not for HTML elements but for SVG only like fill and stroke. Well, SVGs can be animated or transformed by CSS3 animations, transition, transform or key frames but CSS interactions like hover doesn't work on SVG if you are embedding in an img tag or using a background image but animation will work. 

Just like I shared above there are so many browser issues and problems while working with SVGs. If you are thinking about responsive SVG then it is possible. SVGs are responsive but as I said there are 6 ways and depending on which way you add them decides how to make them responsive. Read this article by Sara Soueidan for better ways (or hacks) to make the SVGs responsive.

When I first created my jQuery I found it pretty simple but you know what? Playing with SVG with Javascript or jQuery is not as simple as HTML. But not to worry because there are many plugins out there to help you out further SVG animate tag will never let you go for Javascript because you can almost do any animation with CSS or animate tag.

Check out these demos, they are amazing.

See the Pen Elastic SVG Sidebar Material Design by Nikolay Talanov (@suez) on CodePen.

See the Pen Lights out svg icon by Hendry Sadrak (@carmination) on CodePen.

See the Pen SVG Clock by Mohamad Mohebifar (@mohebifar) on CodePen.

Better Approach

Okay so lets make it simple. Here is a simple a SVG code:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="#333" stroke-width="4" fill="#09f" />
</svg>

This will create a simple circle. If you are new and know a bit about HTML then I'll prefer you to add this code inline in HTML document. This is the most simplest way to use. This even do not create any shadow DOM and you can use CSS3 transitions and transforms on it.

To make the above SVG object responsive, remove width and height attribute and add preserveAspectRatio="xMinYMin meet". This will make the SVG to 100% width and height. If there is any viewbox attribute attached with SVG, than never remove that it will complete break the SVG. The new code would be:

<svg preserveAspectRatio="xMinYMin meet">
  <circle cx="50" cy="50" r="40" stroke="#333" stroke-width="4" fill="#09f" />
</svg>

The link of article by Sara Soueidan is shared above also got some good ways to overcome so responsive stuff. A complex logo might not looks clearly due to text in that, removing logo elements in a way that the sense of logo remains the same. This is one of the commonly used technique to overcome the responsive issue.

Browser Support

The next step is browser support, if you are looking for browser here it is:

IE 9	Chrome 31	Opera 30	Firefox 31	Safari 7

Fallbacks

So,if you wanted to add some sort of fallback on SVGs then we got some ways. First, SVG can be added via img tag. You just create a SVG and upload it on server. Then just like an image you put it on DOM. But you do also attach a onerror event handler on that with a .jpg or .png file for browser with lack of support.

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

If you are embedding SVG via object tag then its easy. Put fallback between object tag, here is an example:

<object data="img/svgfile.svg" type="image/svg+xml" height="50" width="50">
Your browser doesn't support SVG
</object>

For inline SVG, its not a direct way to do that. I will prefer you to use Modernizr.js for that purpose. If Modernizr condition return true show SVG, if false show fallback.

<svg>...</svg>
<div class='svgfallback hide'> <!-- Fallback --></div>

.svgfallback.hide{
display:none;
}

if (!Modernizr.svg) {
    var e = document.querySelector('.svgfallback');
    e.classList.remove('hide');
}

So in this way you get a fallback for inline SVGs. If you are really interested in SVGs then there are countless working examples of SVGs with different situations.

Conclusion

I am really hoping that if you haven't started with SVG even after 5 years, then I'm hoping that this post is really enough to ensure you that SVGs are best in class right now. I've seen developers using it for purposes like graphs and infographics and all those cool stuff that was only and only possible with those complex Javascripts or with images. But now we have scalable vector technology that we should start adopting from right now.

Foot notes

• CSS-Tricks : SVG Fallbacks
• Modernizr JS : Modernizr Docs
• Codrops : STYLING THE CONTENTS OF SVG <USE> WITH CSS
• Sara Soueidan's blog : BETTER SVG FALLBACK AND ART DIRECTION WITH THE <PICTURE> ELEMENT
• CSS-Tricks : Using SVG
• Site Point : Scalable Vector Graphics: an Overview