#137: SVG is for Everybody | CSS-Tricks

Rather than a typical screencast, this is a video taken of my talk SVG is for Everybody recorded by the Treehouse gang at BlendConf. Of course there is far too much about SVG to cover in just one talk, so it’s mostly me trying to convince you that SVG is very cool, where to get it, how to use it, and that kind of thing. Also a whole part about using SVG as an icon system and how that compares to icon fonts.

Comments

John

# March 13, 2015

Any chance we could get the slides?

Chris Coyier

Permalink to comment# March 15, 2015

Yeah here you go: https://speakerdeck.com/chriscoyier/svg-is-for-everybody

Might not match perfectly, those slides are a bit newer version.

John

# March 16, 2015

Thanks very much for the slides!

I’ve exported an SVG from Illustrator. Same options. The graphic has text. When I open the SVG on Chrome, the letter spacing is messed up and it’s not even picking up the right font. On Android Chrome works perfectly.

Any idea? :S

Steve Engert

Permalink to comment# March 16, 2015

Outline the text before you export it—select the text and hit CMD+Shift+O (Ctrl+Shift+O on a PC).
John

Permalink to comment# March 17, 2015

Thank you so very much Steve!

Mike

# March 18, 2015

Thanks for posting your talk, Chris. I just set up my first SVG sprite system the other day and I’m now a fan! And Shovels & Rope are from SC… Chucktown to be exact! ;) They’re pretty awesome ain’t they.

Teelah

# April 6, 2015

This was an awesome article and completely agree. SVG really is for everyone, no matter what market you are in the web design industry.

Amit

# May 26, 2015

Hi Chris,awesome article,i am trying hands on svg with angular materials.here is code.

<div layout="row"><svg width="25" height="25">
                                 <use id="use1" xlink:href="img/new.svg#cp1"/>                                                  
                             </svg>
        <md-content flex="99"><!-- body width=flex 99 --> 
        <md-tabs>
        <md-tab label="First"> 
        <md-content class="md-padding">
        <div layout="row">
            <div flex="33">
                 <!-- start card --> 
                    <div layout="column">
                        <md-card  style="border-radius: 10px;position: relative;">                          
                            <md-card-content><svg class="new2" width="25" height="25">
                                 <use id="use2" xlink:href="img/new.svg#cp1"/>                                                  
                             </svg>                             
                                Customer Profile
                            </md-card-content> 
                        </md-card>                                      
                    </div>                  
                <!-- end card --> 
            </div>                      
        </div>
        </md-content> </md-tab> <md-tab label="Second"> <md-content class="md-padding">
        Second Page
        </md-content> </md-tab>         
</div>

I am getting svg “use1” displayed in IE 11 whereas “use2” which is same as above is not getting displayed.I debugged it and i can see that fragment in “svg4everybody.js v1.0.0” is getting appended in svg svg.appendChild(fragment); Still it is not getting rendered in html(i inspected the svg element).and i got.>svg width=”25″ height=”25″><\svg>. “fragment” part is missing which is a path of human image. using >use> with an external source.[by referring one of your earlier post (https://css-tricks.com/svg-use-external-source/)].

Julia

# July 6, 2015

Hi Chris, I havn’t seen you live for a while. Did you loose a lot of weight? Looking hot there.
Thank you for sharing this talk. Very valuable.

Julia

Viacheslav

# September 29, 2015

Hi! Great article! Thanks a lot.

Some questions about svg4everybody:

Is it possible to manage a separate path via css in Chrome?
( .bin .path1 {fill: lime; } )
It works everywhere but not in Chrome. can’t have access to shadow-root
Is it possible to place icons via pseudo-elements?

Sam

# October 6, 2015

I LOVE this. Feeling super motivated right now. The crowd was a little sleepy. Just want you to know I totally woulda laughed at all those jokes had I been in the audience. Great video/talk. Thanks!

Akhilesh

# December 6, 2015

Comparison between inline svg and icon fonts is god. But what if we want to ship the icons to application developers. We do not control their pages and cannot inject the SVG inline.

Jeff

# June 23, 2016

There still seems to be browser support problems with external SVG sprites that have gradients. Any insights?

Comments

Leave a Reply Cancel reply