what the heck!! that is so wild, mind blowing, i thought the main difference between raster graphics and vector graphics was the quality but i didn’t think about it too deeply.
i had no idea svg files actually used html code and pretty much could be modified using only text and amazing code woa!!! this opens up the possibility for so many things on linux i think.
for example, on a linux distro, we could modify the desktop environment and make it waaaaay lighter by getting rid of jpg or png icons and just using pure svg on it.
svg can be given a lot of attributes like movement, mouse hovering, change color, change anything. and most svg files are still under a megabyte. wow… please let me know other fun facts about svg or eps files. i really like doing graphic design on linux and inkscape.
Another interesting part is that HTML5 supports embedding SVG. That is, you can put SVG code directly in your HTML5 document and it’s going to render correctly. You can also style it through your website’s CSS file and manipulate the elements via JavaScript.
Though as others pointed out, it’s technically not HTML but XML. For example, you have to close all the elements and quote all the attribute values. But when you embed it inside a HTML document, those rules get relaxed to adhere with HTML. (I.e., you cannot write
<circle r=5>in SVG (it must be<circle r="5" />) but you can when you embed it in HTML).woww that is crazy, thanks, does that mean that instead of using exported pngs, i can just use the svg code on html and it’ll be a much lighter file??
litghter, as in smaller, yess. but keep in mind, that vector graphics need to be rendered, wich depending on circumstance and graphic might become inefficient.
i never crunched the numbers, but basically youre outsourcing the generation of a rastergraphic to those who open up your website.
Though this also has advantages - not only will they be drawn at an appropriate resolution, they can also be styled & modified by the user. If I’m using Dark Reader and your icons are SVGs using
currentColor, they’ll render with the same color as other text. The best you can do for raster graphics is inverting them.i too love the svg. rest assured. ;)
One should always optimize assets for the web, this includes svg as well.
For critical paths I use https://optimize.svgomg.net/ a svg file optimizer. Svgs that are coming directly from illustrator or sketch are getting better these days but this little tool is invaluable regardless.
I think you can run this local too
If you have an SVG image you can either embed it directly on the website, or link it using
imgtag. Whatever the case, there’s no need to export it to PNG.And yes, that will likely result in a smaller website and furthermore images which can scale smoothly.