Adobe released an update to Illustrator yesterday (January 18, 2014) that outputs responsive SVG graphics. SVG graphics are vector based meaning they should work at any resolution and be fast to load. They aren’t widely used on the internet because of poor support by browsers but that is slowly changing.
If you can see the image below, then your browser supports SVG format images.
2023 update on SVG
SVG is widely supported by modern browsers. My bizarre graphic below might not be what you want on your website 😊 however, SVG has become my standard for displaying super sharp logos at any size on websites. They are ideal on both desktop and mobile and never look fuzzy like rescaled bitmap graphics. They are reasonably small, often much smaller than bitmap equivalents and can do a great job of displaying small text.
Adobe Express Free SVG Converter
Adobe has been on fire with their AI tools in 2023. New software updates keep flying out. They reached out to me about Adobe Express’ Free SVG Converter which I have tested as a great option for those that don’t have Illustrator.
These icons were AI generated! The Times They Are A-Changin!
It did a great job converting this single colour icon. The vectors are really clean when I look at it in Illustrator. The file is only 34 KB.
This two-colour icon also converted well although there are some artifacts that increased the complexity and size of the image. At 142 KB it is still useable especially if you want to display it large. I would recommend cleaning up any graphics you want to convert as much as possible before you convert them. Avoid gradations.
I also tested a photo which is not recommended. It did a wonderful job of posterizing the complex image, but the output was a 12 MB file not suitable for the internet. Stick to jpg or webp for photos. SVG is best for flat low colour count graphics such as logos and icons. I’ve uploaded a jpg file to show the posterization effect.
SVG security
WordPress still doesn’t natively support SVG graphics but there are many plugins to add this support. Just be careful where you source the SVG file from as it is a very powerful file format capable of hiding nasty code.
Convert vector to SVG using Adobe Illustrator
Any .eps .ai or PDF vector graphic can be easily converted to a web friendly SVG using Adobe Illustrator. In my current version of Illustrator (v27) a graphic can be saved as SVG via the File > Export for Screens… menu. Change the Format from PNG to SVG.
When placing your SVG in WordPress you might have to place it in the media library before you place it in the page.
SVG files do not have a default size so might not appear at all or might appear very small or large depending on where you are applying them and which plugin you are using. WordPress Gutenberg does a good job with native scaling controls. On older websites we sometimes need to add CSS code to set the size.
