SVG svg filters svg icons. SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.
What are the best practices for embedding an SVG image?
A title attribute allows hovering over the image to obtain more information. Ideally, whatever way you choose to embed an SVG, you should have alt and title attributes. We all know page speed will be a ranking factor on search engines, especially on mobile sites. It pays to enable browser caching for all static assets including SVG images.
How can I use SVG files in my website?
Another way to use SVG’s is to convert them into Data URL’s. Data URL’s might not save you actual file size, but can be more efficient because the data is right there. It doesn’t require an additional network request. Mobilefish.com has an online conversion tool for that base64ing them, but I generally don’t think that’s a good idea for SVG.
What are the advantages and disadvantages of SVG?
According to the World Wide Web Consortium, SVG offers anything between 75% – 85% compression ratio, reducing a 16KB file to only 4KB, resulting in considerable bandwidth and speed savings. Because of security reasons, some SVG embedding methods will block access to external resources including CSS, fonts and javascript.
