this post was submitted on 22 Mar 2025
101 points (75.1% liked)
Linux
52212 readers
750 users here now
From Wikipedia, the free encyclopedia
Linux is a family of open source Unix-like operating systems based on the Linux kernel, an operating system kernel first released on September 17, 1991 by Linus Torvalds. Linux is typically packaged in a Linux distribution (or distro for short).
Distributions include the Linux kernel and supporting system software and libraries, many of which are provided by the GNU Project. Many Linux distributions use the word "Linux" in their name, but the Free Software Foundation uses the name GNU/Linux to emphasize the importance of GNU software, causing some controversy.
Rules
- Posts must be relevant to operating systems running the Linux kernel. GNU/Linux or otherwise.
- No misinformation
- No NSFW content
- No hate speech, bigotry, etc
Related Communities
Community icon by Alpár-Etele Méder, licensed under CC BY 3.0
founded 5 years ago
MODERATORS
you are viewing a single comment's thread
view the rest of the comments
view the rest of the comments
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. ;)
If you have an SVG image you can either embed it directly on the website, or link it using
img
tag. 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.
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