In general there’s no difference between a .svg file and svg text in the Inner HTML of an element. We’ve only heard about one bug of svg SMIL animations not playing in Firefox if it is included as a .svg file. But there are some pros/cons to both approaches.
Inner HTML:
- It is included within the
*_hype_generated_script.jsso you do not need another network connection to get the file. But - your HTTP server may be pretty efficient at multiple network connections anyways. Also, this will increase the size a little bit (I’d guess around 5%) since it needs to be escaped as javascript data. This also means it may take a little longer to parse. So I’d only do it for very small SVGs, say less than 5k. - You can more easily make direct code edits. But if you’re coming from a visual tool like Illustrator, chances are this applies less.
- Direct access to the SVG nodes via code if you want to make programmatic manipulations (via below note from @lovetobuildstuff)
As a .svg file
- You can make use of the Resource Library, including its update functionality if it finds the original has changed on disk. This can lead to quicker turnarounds. You can also easily “replace” with another format if need be.
- The above note from @photics about optimizing
.