HomeОбразованиеRelated VideosMore From: LevelUpTuts

HTML5 Tutorials #19 - SVG Inline and CSS Styling

399 ratings | 37860 views
Learn how you can have SVG code directly in your HTML document. You also learn how to style SVG with CSS. Subscribe to Level Up Pro for extra features! https://www.leveluptutorials.com/store/products/pro Subscribe to the Level Up Newsletter http://eepurl.com/AWjGz For questions post in the comments or visit: http://leveluptuts.com/forum To Support Level Up Tuts: http://leveluptuts.com/donations Simple cloud hosting, built for developers.: https://www.digitalocean.com/?refcode=67357174b09e
Html code for embedding videos on your blog
Text Comments (51)
Sam Steel (5 days ago)
Is the only way to fill an SVG is when it's inline? What if I had an image I wanted to use in multiple places, but didn't want to have the same SVG code all over?
Krishnamoorthy M (2 months ago)
how to give Shadow Effect
Karin Lungwitz (3 months ago)
muchas gracias
Paul Preslee (8 months ago)
good job!
samiebuka (8 months ago)
Had to watch a 1 minute wix.com add to see the video.. Think about it, why would front end developers need wix.com? They keep throwing ads at me to the point I won't ever use them or recommend them any more.  I have no way of telling google to stop showing me wix.com ads.
Yuri T. (1 year ago)
Thank you, Scott. How would handle the situation when you need to have this icon several times on one page but in different colors ?
DJJOOLZDE (1 year ago)
Learned something new today. Thanks :)
Eldad Nachtomi (1 year ago)
I hear more and more on accessibility (ARIA) in the internet, I understood that are some rules are written in HTML (like aria, alt for images, ...), and some rules are needed in JS (for changing contrast, increasing / decreasing the font, ....). Please can you create a video for Accessibility section too? Thank you in advance :)
Cho Lin Tsai (1 year ago)
Oh god, I recognized the poster on the wall. 「人皮燈籠」....it's creepy man...
Stefan Tosic (1 year ago)
Great teacher. thanks a lot :D
thatJARED (1 year ago)
Have you got a hackintosh?
Bernardo Bello (2 years ago)
Thank you so much for this tut. How can we put conditionals like "if" in the hover property?
Testificate Maps (1 year ago)
Bernardo Bello Simply add or remove classes with JavaScript
Rizqy Fahmi (2 years ago)
Wow.. it's amazing Scott! finally, I understand the awesome techonlogy of SVG. Thank you :)
reboottees (2 years ago)
great tutorial! who cares about IE8 or anyone using Internet Explorer. We deliberately leave out IE for all future development. The thinking is that anyone that is still using IE is a moron and will be excluded from accessing cool stuff like svgs. In fact, most IE users will be the first batch of sheeple sent to the FEMA camps. ;-)~
Thomas Williams (2 years ago)
Is it possible to load the svg into css as a background image and still manipulate the css. I need to use it in the before: css so that I can make icons for buttons.
lynerjy (2 years ago)
Scott you're such a good teacher <3
LevelUpTuts (2 years ago)
Thank you :).
Mustafa Zahid Efe (2 years ago)
Thank's man, I love your videos.
MADPURO (2 years ago)
would you be able to do ".logo .new-shape:hover{ }"?
MADPURO (2 years ago)
+Faizan Akram Dar Ahhh ok thank you very much. Good info :D
Faizan Akram Dar (2 years ago)
+MADPURO It would result the same as .new-shape:hover{} since it means when .new-shape is hovered change the color. Although the requirement was to change the color when .logo is hovered.
Garth's Stare (2 years ago)
Hey man,great tutorials !Please give me link to all properties that I can change on svg...
McGavel1 (3 years ago)
This is great, thanks! On a CSS Tricks page I read that you can embed the SVG as an object, which allows you to link an external stylesheet to the SVG, which keeps everything concise if the SVG is a huge chunk of code: "Using SVG As An Object": https://css-tricks.com/using-svg/
Husain Ahmmed (3 years ago)
Awesome!!!
kamaboko1 (3 years ago)
Hey, great tuts.  I have a question regarding svg's and Android phones.  I, for the life of me, cannot get svg's to display properly on Chrome, Dolphin, or Opera on my Galaxy S4.  For some reason they're OK with Firefox, but otherwise I simply cannot get it to work.  The last one or two characters in my text get cut off.  I've messed with all sorts of width settings, but to no avail.   Tips, tricks?  As for what I've been doing, I'm trying to set a simple svg logo I made in Sketch 3 ( great tuts as well ).   Thanks for your input.
o x (3 years ago)
thanks
Eric Martinez (3 years ago)
Great videos on SVGs. I just stumbled upon them. OK, so I'm wondering what scenarios there be not to use a SVG in terms to displaying logos and other vector images on a page?
LevelUpTuts (3 years ago)
+Eric Martinez I use SVGs wherever I can. The only bummer about it is having to have an image fallback for older browsers.
seolong (3 years ago)
Awesome!
Matthew Rath (3 years ago)
Please note this (and the clip before) has quite a big problem. What is it? Ok so use case, typical website, lets take youtube for example; How many icons you reckon are on this page? 1. Youtube logo (top left) 2. Hamburger icon next to it (menu) (Inside the menu) 3. What to watch 4. My channel 5. My Subscriptions 6. History 7. Watch later 8. Different Hamburger icon 9. Browse Channels 10. Manage subscriptions 11. Thumbs up 12. Thumbs down ... As you can see it's quickly becoming quite unwieldy, and at this point some people are probably saying "why wouldn't you just use an icon font?", a link for that: http://css-tricks.com/icon-fonts-vs-svg/ TL:DR; while it is less backwards compatible (must be IE9+, android 4.1+) it's easier to align and manipulate SVG's. ================================== Now for the problem. How do you limit the number of HTTP requests streamlining the site and improving mobile experience? (at least until everything migrates to HTTP2 but that's another thing entirely) - img tags (as in the previous video of the series) doesn't solve this. - css doesn't solve this (it just defers the requests to the CSS object model) You could inline every svg... but (as examined) there can be quite a few and it doesn't really get much easier to edit. Solution... SVG sprites, and to that end i request an update to the gulp series, with these tools: (for minifying, careful you save correctly with illustrator it can be glitchy) https://www.npmjs.com/package/gulp-svgo (for creating the sprite) https://www.npmjs.com/package/gulp-svgstore/ I believe there's also a way to create reliable PNG fallbacks but im still experimenting with that. Related links: http://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/ http://css-tricks.com/svg-sprites-use-better-icon-fonts/ Thanks for all the good work, i've learned alot from this channel.
Yunhan Li (4 years ago)
Great video! It helps me a lot
lLena101 (4 years ago)
Not working for me.. My svg file is a little bit different, maybe because I'm using Illustrator CC. I can't change the color in css like this. <g> <path fill="#FF6192" d="M187.5,257.3c9.7-29,92.1-69.4,127.9-128.4H60.5C97.4,185.9,180.8,224.6,187.5,257.3z"/> <path fill="#FF6192" d="M258.1,0c-33.4,0-61.5,22.2-70.6,52.6C178.4,22.2,150.2,0,116.9,0C79.1,0,48,28.3,43.7,64.9h287.7 C327,28.3,295.9,0,258.1,0z"/> etc...
Bawwan CSGO (3 years ago)
+lLena101 Same here...
Calvin Hisoka (4 years ago)
Nice videos! Really grateful. Waiting on your next tutorial video on HTML5.
Valery Chen (4 years ago)
Great tutorial! I read that SVG are not cacheable. Does that mean if your logo is an SVG, then pages with SVG are not cached?
Ryly Shane (4 years ago)
For some reason or another this did not work with an SVG using multiple groups I had exported from iDraw. I switched to a single shape exported from Sketch and had no problems however. Any insight into this or would I need to post some code? 
Ryly Shane (4 years ago)
It also seems that the native CSS syntax in Sublime doesn't recognize the fill css attribute? 
Thiago Resende (4 years ago)
Great, man! Thanks!
Jemmeli Nejmeddine (4 years ago)
thx cool tuto , we need more on SVG tutorials please
Camilo Muñoz (4 years ago)
Thanks! Always great videos!
Adrian Florescu (4 years ago)
Nice. Great videos. I was looking for an automated fallback method in IE8 and I found a grunt plugin: https://github.com/filamentgroup/grunticon
LevelUpTuts (4 years ago)
Nice! Thanks for the link, I'll have to check that out.
Tim Bogdanov (4 years ago)
Oh my gosh!!! Thank you so much!
LevelUpTuts (4 years ago)
No problem, thanks for watching. SVG images are an easy enhancement that makes a big difference.
Chris DeMars (4 years ago)
I like svgs more now...and sketch seems so much easier to use than illustrator to create vector images
LevelUpTuts (4 years ago)
I certainly prefer Sketch's interface and experience.
Dylan Ziggy Fox (4 years ago)
Good vid though!
Dylan Ziggy Fox (4 years ago)
"on huvr"
Dylan Ziggy Fox (4 years ago)
Some parts haha but in a goodway
LevelUpTuts (4 years ago)
Haha is that what it sounds like? I'm so immune to how my own voice sounds now.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.