from adrianhooves@lemmy.today to linux@lemmy.ml on 22 Mar 04:29
https://lemmy.today/post/26027496
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.
threaded - newest
More precisely, both are flavors of XML.
…which is derived from SGML.
HTML predates XML by several years.
Age doesn’t matter. XML is a super-set of XHTML’s spec.
That is - all XHTML is valid XML but not all XML is valid XHTML.
Note I’m saying XHTML not HTML since the later need not be valid XML.
No
No what?
That’s a weird way of saying XHTML is an application of XML.
You can phrase it however you like?
?
technically HTML is not XML… XHTML is, but HTML can be invalid XML.
Ok—to the extent that SVG is HTML, the variant of HTML that it is is a flavor of XML.
It annoys me that you aren’t supposed to close input tags. At least browsers tolerate self closing them even if it is out of spec.
Technically it’s not browser tolerance but spec tolerance. It’s built into the html5 spec to tolerate different tags closing and other things invalid in xml.
This was an important design that grew out of one of the largest failings of xhtml that such failures would make the entire page unrenderable.
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??
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.
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 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
Damn, I actually did not know that. I thought it was just an image file.
It’s both of those things
Schrödinger’s SVG?
Yeah, it depends on if you view source
It’s not. The primitives, the most basic constitutive building blocks, are different, for raster it’s the pixel (a mix of colors, e.g. red/green/blue) whereas for vector it’s the … vector (a relative position elements, e.g. line, circle, rectangle or text start with).
This is a fundamental distinction on how you interact with the content. For raster you basically paint over pixels, changing the values of pixels, whereas for vector you change values of elements and add/remove elements. Both can be lossless though (vector always is) as for raster can have no compression or lossless compression. That being said raster does have a grid size (i.e. how many pixels are stored, e.g. 800x600) whereas vector does not, letting you zoom infinitely and see no aliasing on straight lines.
Anyway yes it’s fascinating. In fact you can even modify SVG straight from the browser, no image editor or text editor needed, thanks to your browser inspector (easy to change the color of a rectangle for example) or even the console itself then via JavaScript and
contentDocumentyou can change a lot more programmatically (e.g. change the color of all rectangles).It’s a lot of fun to tinker with!
I’m not sure that lossy compression on vectors is strictly impossible.
You can do things like store less colour information and simplify splines so that curves are less complex.
True, in fact I’ve done so myself (simplifying a curve resulting of hand sketching). Still I’d argue that’s not the expected behavior of storing the vector file but rather explicitly modifying it.
They can include runnable JavaScript too, which can cause vulnerabilities in certain contexts. One example from work some years back: We had a web app where users could upload files, and certain users could view files uploaded by others. They had the option to download the file or, if it was a file type that the browser could display (like an image or a PDF), the site would display it directly on the page.
To prevent any XSS (scripts from user-provided files), we served all files with the CSP sandbox header, which prevents any scripts from running. However, at the time, that header broke some features of the video player on certain browsers (I think in Safari, at least), so we had to serve some file types without the header. Mistakenly, we also included image files in the exclusion, as everyone through image files couldn’t contain scripts. But the MIME type for SVG files is
image/svg+xml… It was very embarrassing to have such a simple XSS vuln flagged in a security audit.That’s already happening.
You can also change the main color of many SVGs (icons or even desktop backgrounds) with one simple edit, one command, one click.
In web sites, you can assign CSS classes to SVG graphics and thus e.g. change their color according to a theme.
That’s my extent of fiddling with it.
IIRC they also use fonts the same way CSS/HTML does.
BTW, there are situations where an SVG is significantly larger than a corresponding raster image. It depends on the content.
Postscript is also literally just a text based programming language for drawing stuff. You can create loops and recursions and all kinds of crazy transformations with a few lines of code.
No, SVG files are not HTML.
Please change this post title (currently “today i learned: svg files are literally just html code”), to avoid spreading this incorrect factoid!I suggest you change it to “today i learned: svg files are just text in an html-like language” or something like that.edit: thanks OPSVG is a dialect of XML.
XML and HTML have many similarities, because they both are descendants of SGML. But, as others have noted in this thread, HTML is also not XML. (Except for when it’s XHTML…)
Like HTML, SVG also can use CSS, and, in some environments (eg, in browsers, but not in Inkscape) also JavaScript. But, the styles you can specify with CSS in SVG are quite different than those you can specify with CSS in HTML.
Lastly, you can embed SVG in HTML and it will work in (modern) browsers. You cannot embed HTML in SVG, however.
ok thank you very much!!
You know how they say that the internet is a series of tubes? We used to think that was just a funny old man. Turns out, it is the literal truth. The internet is made up of SVG files!
I remember when XHTML was supposed to replace HTML. Everything was going to be standardized and web designers would run their HTML code against a validator…it was going to be glorious! And of course it never happened, because demanding that all websites conform to the XHTML standard would’ve broken a lot of websites.
So, HTML5 ate XHTML’s lunch because it was much more forgiving, and…oh yeah, you could watch videos and play games in it, too.
I fucking learned a whole-ass language for nothing back then because I thought it was the future!, fuck you, XHTML!
100% of XHTML will work in HTML5.
As someone who can find a billion XML parser libraries and, like, three HTML parser libraries, you do have my gratitude if it’s worth anything.
Killing Flash was worth it, but couldn’t we have avoided its reign of tyranny if we’d just stuck with Java applets in the first place…?
I made an interactive map: drew in Inkscape, gave the interactive elements numbers for ids, then substituted the id=‘xxx’ in vim with the php code and js function calls, picking up the number from the id tag and inserting it appropriately in php code and function arguments. 250 interactive elements taken care of in a single vim substitute. My bestest development power move yet :D
What was the map used for?
It’s a map of fairground lots for a service that takes bookings, bills the customer and deals with providing relevant safety info to authorities. In use again this season :)
Yo that’s super cool! My nerd brain went straight to a virtual table top map for D&D
this has largely happened; if you’re on a dpkg-based distro try running this command:
dpkg -S svg | grep svg$ | sort…and you’ll see that your distro includes thousands of SVG files :)
explanation of that pipeline:
*
dpkg -S svg- this searches for files installed by the package manager which contain “svg” in their path *grep svg$- this filters the output to only show paths which end with svg; that is, the actual svg files. the argument to grep is a regular expression, where$means “end of line”. you can invert the match (to see the pathsdpkg -S svgfound which only contain “svg” in the middle of the path) by writinggrep -v svg$instead. * thesortcommand does what it says on the tin, and makes the output easier to read you can runman dpkg,man grep, andman sortto read more about each of these commands.for alpine linux users:
Is this the same as
pacman -Ql?Edit: the dpkg part is.
Ommigod, these kids :)
SVG comes XML (a more coherent/simple version of the SGML that is behind HTML), and specifically from a time where people took XML and made it hyper-complicated with a flurry of extensions and specifications (look up “xml namespaces” “xslt” “xml schema”).
The most apparent difference between SGML and XML is than in the former you write tags like <br> without a corresponding </br>, and in the latter you have to close them like <br/> (which is shorthand for <br></br>).
So… today you learned that what you learned earlier today was close to truth, but not true :)
PS: A lot of document formats are undercover/zipped XML (eg. the libre office documents, IIRC microsoft’s .xlsx and .docx). This is not dissimilar to how json/yaml are widely used today.
So, my Lemmy app - and I think a lot of Lemmy, renders markdown, so whenever you write “<…>” It disappears for me!
I tried adding backslashes to escape, it still looks fine on lemmy.ml but your app may be bugged (and possibly vulnerable to xss? can you see the script block after the closed bracket?) <script>alert(‘you should not see an alert’)</script>
It all looks good now :-)
Oooh, neat! [Cunningham’s Law] (en.m.wikipedia.org/wiki/Ward_Cunningham#Cunningha…) in action!
No, it’s XML. It’s an ancestor of HTML and, unlike HTML, it can be losslessly converted.
Not quite. XML came several years after HTML! Both are descendants of SGML.
Oh, ok.
Isn’t that how it already works? GNOME system icons are all SVG - that’s what allows them to change colors when you change themes or switch between light and dark mode.
i didn’t know that, is that the same in xfce??
hard to tell, but you can check it:
maybe also include
-xdevif you have an external drive that doesn’t hold any system files.There are both, PNG as standard sizes and the SVGs. I believe the DE pulls the 32 48 256 pixel pngs so no addition rendering is needed.
I don’t think it would be lighter, SVGs need a rendering tool to read the code and draw the artwork for the vector based images. This has always been slower than just displaying a bmp, jpg, or PNG.
It’s lighter in memory. on android (development) it has been said for a few years now that it’s better to use them for most cases, because android apps tend to use a ton of icons and this way they are small, themable, scaleable (the other option is to include multiple versions with diff resolutions), and can even have animations. it can basically save a lot of space.
but of course that will make no difference when the apps are 180 MB, partly because of the same 30 MB native libs being bundled for 4 different CPU architectures, because wasteful the dev didn’t bother to produce different APKs for the different kinds of CPUs. and similar project mismanagement things.
Hold on now. If an svg will render as valid html in browsers, does that mean I can use Inkscape as a wysiwyg webpage editor, and just export that to html?
good question, i once made a website mockup on inkscape and it would be interesting if i could just turn that into an html file