#137: SVG is for Everybody

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

  1. User Avatar
    John
    Permalink to comment#

    Any chance we could get the slides?

  2. User Avatar
    John
    Permalink to comment#

    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

    • User Avatar
      Steve Engert
      Permalink to comment#

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

    • User Avatar
      John
      Permalink to comment#

      Thank you so very much Steve!

  3. User Avatar
    Mike
    Permalink to comment#

    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.

  4. User Avatar
    Teelah
    Permalink to comment#

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

  5. User Avatar
    Amit

    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/)].

  6. User Avatar
    Julia

    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

  7. User Avatar
    Viacheslav
    Permalink to comment#

    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?

  8. User Avatar
    Sam
    Permalink to comment#

    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!

  9. User Avatar
    Akhilesh
    Permalink to comment#

    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.

  10. User Avatar
    Jeff
    Permalink to comment#

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

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag