What are three situations where using SVG is advantageous over other methods? Explain why SVG is better in those situations.
- SVG files are small and compress well. Anything that can help reduce loading time is always the best choice.
- Vector files can be enlarged without losing crispness (unlike .gif or .jpg). This is ideal because one small image can be used in multiple place throughout a site at various sizes by changing the CSS.
- SVG files look great on retina displays an obvious choice for 3-D animation.
Why would you want to optimize your SVG from Adobe Illustrator? Actually you wouldn’t necessarily optimize from illustrator because illustrator adds a lot of code to the file. Once saved from Illustrator, you can use an online SVG optimizer tool to clean up the file.
What are some other nuts and bolts you learned from the reading you’d like to make note of in your blog so that you can remember them when you try to implement SVG in the future?
- Another clever progressive enhancement flavored technique for using SVG as background-image is by using it in conjunction with multiple backgrounds.
- You can grab the SVG code right from Illustrator and drop it right into an HTML document. The SVG image will show up just the same as if you put it in an img.
- SVG has fancy filters such as blurring.
Here’s a great article from Smashing Magazine on SVG filters.: