Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Neil Little
Neil Little
5,555 Points

Use of & Coding SVG's in HTML

How to people currently code in SVG's in their pages?

I have seen this thread, from Todd a great front-end developer:

http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/

I have also see this one, from Chris another well known developer:

http://css-tricks.com/using-svg/

This forum, and some of the tutorials have also used the HTML Element "Object", however would like to see a moderator's thoughts. And what the feelings are around best practises depending on targeted browsers.

E.G Designing for the latest browsers but requiring fallback to at least IE8

Or developing for all browsers and supporting new browsers using specific class and jQuery tests / Modernizr if conditions.

At the moment I am keen on taking in some views on this from people are well aware of the SVG success and pitfalls in the "Real Life Situations". Many thanks.

4 Answers

Steve McKinney
Steve McKinney
29,274 Points
Steve McKinney
Steve McKinney
29,274 Points

I have used svg on the last 3 or 4 websites I have built recently (all for varying business sizes) and have had no trouble at all. Through the using the <img> tag or CSS. I use modernizr to patch up support for both. It's pretty hassle free when you use http://grumpicon.com to generate your pngs.

I did originally use the CSS tricks article for advice. As long as you use modernizr you can always be sure your images will display.

Neil Little
Neil Little
5,555 Points

Crikey, thats a lot of points!

Thanks for the link. This is the sorta feedback I need. Great site, funny I was looking for the physical .png file. However the base64 is quite interesting.

However is bvase64 worth the increased size of the CSS file v's the http request? Especially for older browsers [ .no-svg .my-image {...} ].

Steve McKinney
Steve McKinney
29,274 Points
Steve McKinney
Steve McKinney
29,274 Points

I do use base64 for some things, particularly simple icons. A lot of icons will usually be quite small in base64 so it's not difficult to justify use. However if you're concerned about the gain in file size for including both, you could make a separate stylesheet for png fallbacks, for example with modernizr you would do:

Modernizr.load({
    test: Modernizr.svg,
    nope: 'png.css'
});

Modernizr.load docs here: http://modernizr.com/docs/#load

I've haven't done this method before, so it's untested but it's something I would do if I was concerned about file size.

Neil Little
Neil Little
5,555 Points

Something I will look into. I have been playing around with a js file called vendor-load with my modernizr.load set of tests. I think it may be easier to down a png.css route (as above) then create:

/* SCSS MODERNIZR NO-SVG FALLBACK STYLES */
.no-svg{

    .gobal-logo{
        // SCSS HERE
    }

    .artwork-1{
        // SCSS HERE
    }

    .artwork-1{
        // SCSS HERE
    }

    .artwork-1{
        // SCSS HERE
    }

    .footer-logo{
        // SCSS HERE
    }
}

Had a look at some of your blog posts, great breakdown. Bookmarked for later!

Steve McKinney
Steve McKinney
29,274 Points

I usually just do something along those lines although. For ease of maintenance, it depends on your setup, but I usually would do:

.logo {
    ...
    .no-svg & { ... } }

So if you break your CSS up into files it keeps all code together related to an element.

Thanks for reading though :)

Neil Little
Neil Little
5,555 Points

No problem, thanks for reply. More than the Contact Treehouse button (they sent me to stackoverflow)...

William Whitworth
William Whitworth
6,117 Points
William Whitworth
William Whitworth
6,117 Points

Chris Coyier at CSS Tricks as a great article about SVG and the various techniques used for implementing them.

http://css-tricks.com/using-svg/

Hope that helps!

Edit: Oh you must have edited while I wrote my answer... oops

Neil Little
Neil Little
5,555 Points

What do you think on my question?

Do you adhere to the HTML Object element or use JS to rewrite the file path?

Neil Little
Neil Little
5,555 Points
Neil Little
Neil Little
5,555 Points

Yeah new to these forums, traditionally I have only used vBulletin & IP Forums. I thought it meant a brief description of the topic not the actual thread.

Thanks for replying hopefully more people will respond.