A Primer to Front-end SVG Hacking

A Primer to Front-end SVG Hacking

Using SVG (Scalable Vector Graphics) on websites is a lot safer than many front-end developers think. Authoring aside — I wouldn’t suggest trying to hand-code an illustration more complex than a triangle* — the standard is well supported in browsers today and perfect for resolution independence when CSS and icon fonts aren’t suitable.

* Quick fire question: at which corner does this right-angle triangle point?

<polygon points="0,100 0,0 100,0 "/>

I’m going to walk you through many conceivable implementations:

Image Elements

Basic usage is as simple as swapping out a regular raster graphic — PNG, JPEG, or GIF — with an SVG file. Here’s an example in HTML:

<img src="image.svg">

According to the can I use compatibility table only Internet Explorer 8 and lower, and Android Browser 2 lack support. They will download and fail to render the image.

With client side fallbacks we can’t avoid the initial download. We could swap out the element source with JavaScript if there’s an error:

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

That’s cute but I can’t imagine many circumstances where it would be the best solution. You can achieve similar results with feature detection:

if (!Modernizr.svg) {
    $('img[src$=".svg"]').each(function()
    {
        $(this).attr('src', $(this).attr('src').replace('.svg', '.png'));
    });
}

Readmore: http://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/

Alternative : Also Read this

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s