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 Build a Responsive Website Responsive Design Vector Graphics (SVG)

Montalvo Miguelo
Montalvo Miguelo
24,789 Points
Posted by Montalvo Miguelo
Montalvo Miguelo
24,789 Points

If I have all my svg icons combined to a single file called "svg-defs.svg" how can i use each icon from that file ??

I have one single file with all my svg icons generated with this grunt plugin https://github.com/FWeinb/grunt-svgstore ... in order to make only one http request for all the icons... what should i do to include each icon from thedvg- defs.svf file.... ??? example for social icons?... i learnt the object tag with the teacher Allison Grayce Marshall with separated svg icons.

5 Answers

Montalvo Miguelo
Montalvo Miguelo
24,789 Points
Montalvo Miguelo
Montalvo Miguelo
24,789 Points

thx Colin ... If i don't have php ... how can in include the svg file at top of the html???

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

If you're just using a .html file then you can just change the extension to .php and add that include line. I can't imagine that your host wouldn't have PHP.

Montalvo Miguelo
Montalvo Miguelo
24,789 Points
Montalvo Miguelo
Montalvo Miguelo
24,789 Points

No I don't need backend php just markup ... :) ...

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Well your other option is to make an icon font and there's some info on that in the link I provided previously. I don't believe you would need PHP for that route.

Out of curiosity, are you restricted to only using a .html file or do you just not want to use PHP?

Montalvo Miguelo
Montalvo Miguelo
24,789 Points
Montalvo Miguelo
Montalvo Miguelo
24,789 Points

gh-pages :p just for practice with svg icons system nothing special ... thx collin :D cheers

Montalvo Miguelo
Montalvo Miguelo
24,789 Points
Montalvo Miguelo
Montalvo Miguelo
24,789 Points

how can i use one svg from the defs-svg-sprite as backgrond in css ???? ... is it possible ?.... or as content in pseudoelements :after :before ??? cheers....