More accurately, both are flavors of XML.

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.

Damn, I actually did not know that. I thought it was just an image file.

main difference between raster graphics and vector graphics was the quality

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 which elements, e.g. line, circle, rectangle, 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 contentDocument you can change a lot more programmatically (e.g. change the color of all rectangles).

It’s a lot of fun to tinker with!

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

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.

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 contain code in an html-like language” or something like that.

SVG is a dialect of XML.

XML and HTML have many similarities, because they are 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.

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

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.

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 paths dpkg -S svg found which only contain “svg” in the middle of the path) by writing grep -v svg$ instead. * the sort command does what it says on the tin, and makes the output easier to read you can run man dpkg, man grep, and man sort to read more about each of these commands.

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.

@amin yes.

@amin worthy of a follow ESPECIALLY given your wonderful avatar.

@amin that's how I learned

Send help, this is starting to go viral and I haven’t had my shots!

@amin I read a blog post about this exact thing the other day but now I can’t find it 😭😭😭