Simple Question about SVG
which quickly in preference
SVG file or SVG code in HTML .13 Replies
Answer by GPT-3 (AI) :
the "it depends" I was talking about, has to do with the size of the SVG. Some of them can be really large and annoying to work with, especially if you're building your html manually and not using a framework or something
If you're just importing a hamburger menu, then code in HTML is definitely the way to go
if you're importing a map of the entire world with elevation lines and gradients, then definitely use an SVG file
But importing a file affects it, I mean the big SVG art or anythink
affects it how?
in preferences
preferences?
Yeb, time of rendering graphics on webpages or time webpage load.
also, be very careful asking GPT3 questions you don't know the answer to already, there's no guarantee that what it says even makes sense
It just depends on the huge number of words in it and searches and collects according to the search results
sure, but that also has an influence on developer experience. I don't really want to open 100kb of SVG in my editor every time I need to edit that HTML file.
Not to mention that maybe that 100kb doesn't need to be shown instantly, and the rest of the page can load around it while your less-important SVG loads in the background
I know how GPT works, just be aware that it doesn't understand anything, and is just pulling crap from the neural net that might make sense
there's no actual intelligence there, and it could say things that are contradictory or wrong, which you wouldn't know if you didn't know the answer already anyway. So don't use it to learn anything, at least with an article written by a real human you get some idea that someone actually thought about it
Oh, well thank you for the advice.
I'd say its situational, personally I prefer inline to reduce http requests, if you are using a language that allows you to use templates/includes you can shove your SVG code in there, there are a few company's out there that do this for all their icons such as Shopify.
If the language you are using doesnt support this, you will notice the lines of code in an SVG can grow pretty huge and you will have to code around this - depending on your patience or will power.
If you dont want to deal with this, and the SVG is decorative or non interactive you can always serve the SVG file as an image.
Big part of having a file is caching, sprites are a great option specially if you use the same icons on different pages.
Inline will only cache per page and if that page even has caching headers.
Big old depends. I do both a lot
Hell I do both in one project it's def situational which to use when.