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.
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.