SVG in WordPress
If you aren’t familiar with SVG yet, it stands for Scalable Vector Graphics, and has been a big topic on the web recently. SVGs are awesome for create crisp, scalable graphics on the web. It’s almost like having an illustrator file inside of your browser. An SVG file can be scaled without losing quality. With that being said, another popular platform, WordPress is the CMS of choice for millions of people world-wide. The idea hit me the other day, and my curiosity spawned this video. I wanted to know if you could upload an SVG to WordPress and use it in your site. The video below shows my experiment of trying SVG in WordPress.
It turns out that SVG files can’t be uploaded to the WordPress Media uploader. At least, it can’t be uploaded directly, because it isn’t supported. However, I do have a hunch that this may be theme or .htaccess related. You may be able to go into the functions.php file and write a function for enabling SVG. This is definitely something that I want t explore in the next couple of weeks. SVG is the future of graphics for the web, simply because of their quality, small file size, and flexibility. It’s a win-win all the way around for anyone who wants the best of both worlds.
Another hunch I have is that you might still be able to use SVG in WordPress, just not in the media uploader. SVG can be declared in html with an image tag, or the SVH code can be pasted inline with the html. PHP outputs as html, so my hypothesis is that an SVG should work among PHP with no trouble. However, I’ve not tried this yet.
SVG in WordPress: What do you think?
Have you tried using SVG in WordPress? Have you embedded SVGs in your WordPress theme? I would love to hear everyone’s thoughts on this. If you have any tips, or a link to a tutorial where this is done, I am leaving the comments open for you to share it with everyone.
Thanks alot for this article, stumbled upon your blog-post on Quora. Working on some SVGs for my website and trying to get them display everywhere. Too bad that there are quite some visitors with incredible old versions of IE…
But in a time where devices like a chromecast only cost a few bucks things just have to be responsive, it’s sooo easy to switch devices, go from your smartphone to a 50″ tv back to your tablet with retina display. Besides that, speed always matters, just ask Google 😉
Stefan,
I am glad you found this useful. I have been working a lot with SVGs lately, and I am excited that in the latest version of Adobe Illustrator, they added the ability to export responsive SVGs. This is awesome and incredible, and makes it much easier to create resolution independent responsive graphics. You should check out some of my other posts that mention this.