Matt 
Does anyone know what this nonsense means in HTML?
From what I can tell the long string of numbers is about an animation? but I might be wrong? The output is an icon.
Luca
DevInTheMtn 
@thelinuxcast looks like a vector image.
Benjamin Hollon ๐บ๐ธ๐ฒ๐พ๐ฎ๐ณ๐ฆ๐ซ@thelinuxcast
It's a SVG vector image.
It's a SVG vector image.
@thelinuxcast
They can be included with a regular img src thingy, but also put in raw like that with the <svg> tag.
They can be included with a regular img src thingy, but also put in raw like that with the <svg> tag.
@benjaminhollon I think I got the svg part, but I don't understand where the icons come from. LIke in a normal img tag, it's src, and then link, and boom, image.
@thelinuxcast
Not sure I understand the question?
The <svg> tag basically contains the raw content of the image, and it shows up the same as if you'd included it with <img> and src. <svg> images are basically just XML and can be represented with the <svg> tag in HTML.
The magic of SVG is how I was able to get the https://tty1.blog favicon to change colors to match the color scheme.
@benjaminhollon What I mean was, say for instance I want to change from a gmail image svg to hotmail. Where would I get the hotmail icon? And if I found the icon or have it on hand or something, the bigger question is how do I get the long svg nonsense? Is there like a translator for moving an SVG into a long stream of nonsense?
Matthias Wichert@benjaminhollon @thelinuxcast If you open the svg file in a text editor, it should be there. Canโt confirm, though, on mobile right now.
Paul Wilde 
:dontpanic_nobg:@thelinuxcast @benjaminhollon you would need to covert the hotmail icon to vector (not straightforward) then "open" the file in a text editor and boom - there's your svg string
but converting image to svg isn't like converting a png to jpg. you have to effectively "trace" the image - which has variable results. if you can find the hotmail icon in svg already it would be much easier
but converting image to svg isn't like converting a png to jpg. you have to effectively "trace" the image - which has variable results. if you can find the hotmail icon in svg already it would be much easier
@paul @benjaminhollon Yeah, if that's supposed to be a better way of doing images on the Internet, I don't see it.
Oh well. Thanks, guys for your help.
@thelinuxcast @benjaminhollon yeah, it is technically a better way because the images scale infinitely yet remain the same filesize - so very good for the internet. BUT, only better for graphics really i.e. icons, glyphs, definitely not for full on images.
Of course, you can also just link the svg file like an actual image rather than inserting it inline as html.
Of course, you can also just link the svg file like an actual image rather than inserting it inline as html.
@paul @thelinuxcast
Yeah. The only advantages of including it raw are (1) it doesn't make another HTTP request and (2) you can manipulate the appearance of the SVG image with JS and CSS.
Yeah. The only advantages of including it raw are (1) it doesn't make another HTTP request and (2) you can manipulate the appearance of the SVG image with JS and CSS.
@benjaminhollon @thelinuxcast yeah, both very good points.
@thelinuxcast @paul
It's a better way of doing *specific types* of images on the web. A SVG is basically a set of mathematical instructions on how to build the image from scratch. It works best for icons and flat illustrations. A raster image like a photograph wouldn't make a good SVG at all.
The advantage is that SVGs remain sharp and crisp at any sizing.
Risyad Rais@thelinuxcast @benjaminhollon there are a lot of free svg icons out there (some are even open source), and they provide their svg to save you from the headache.
Not sure if this logo is the one you're looking for:
https://www.svgrepo.com/vectors/hotmail/
@atmorojo @thelinuxcast
One example of SVGs being handy for me:
My grandparents were having their 50th anniversary celebration and wanted to reuse an illustration (black and white) from their original wedding program. I was able to take a photo, load it into Inkscape and trace it to create a SVG, then manipulate it to remove artifacts so that it looked perfectly good as new for the anniversary program.
Lanius 
@thelinuxcast Itโs an svg image. Svg is basically a text file which might be put inline into html. And thatโs the case here.
bignose@thelinuxcast Note that you've got an SVG element. The 'path' element is one of the many things that can be contained in an SVG; it describes a linear path to trace.
๐๐๐๐๐ ๐จ 
@thelinuxcast Sees Google,
(slowly backs away)..............
@thelinuxcast you can edit it in Inkscape. Copy from <svg> to </svg> and save it as something.svg