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.
Video Screencasts → #137: SVG is for Everybody
#137: SVG is for Everybody
Chris Coyier
on
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
Any chance we could get the slides?
Yeah here you go: https://speakerdeck.com/chriscoyier/svg-is-for-everybody
Might not match perfectly, those slides are a bit newer version.
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
Outline the text before you export it—select the text and hit CMD+Shift+O (Ctrl+Shift+O on a PC).
Thank you so very much Steve!
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.
This was an awesome article and completely agree. SVG really is for everyone, no matter what market you are in the web design industry.
Hi Chris,awesome article,i am trying hands on svg with angular materials.here is code.
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/)].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
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?
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!
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.
There still seems to be browser support problems with external SVG sprites that have gradients. Any insights?