Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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

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.

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 {...} ].

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.

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!

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 :)

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

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

What do you think on my question?

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

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.