Scalable Vector Graphics

Awesome Tiger SVG

Overview

The story so far: In the beginning the Plugin was created. This has made a lot of people very angry and been widely regarded as a bad move. I made a plugin a while ago — it serves a very basic purpose. Allow users to upload and embed SVG files in their websites.

You can download the plugin via WordPress or via GitHub. What’s an SVG? SVG files are two-dimensional vector graphics, that can be both static and dynamic. This plugin allows you to easily use them on your site.

Security

There’s a great post on StackExchange covering some of the basic concerns for SVG Security. Another resources is this video:

Warning: Understanding that uploading any file to the system is a potential security risk, it is strongly recommended to only let trusted users to have upload privileges.

Such a small plugin, I actually got to solve some bugs for the developers over at Mozilla:

FAQ

  • WordPress will give the SVG files a height and width of 1px by 1px when you insert them. This is expected. Remember to change it to something you like when you embed your file.
  • Not all SVG files are transparent, make sure yours is before reporting that as a bug.
  • I do not support anything but the latest browsers. Sorry.
  • Not all SVG files are created equal. There are many ways to make them, some ways will NOT work with this plugin or the Web in general. The plugin expects you’re working with a precompiled file. Mainly because inline will work regardless of having this plugin.
  • There appears to be an issue on Pantheon with this plugin. It throws an error when you upload the SVG — saying that it failed… but it didn’t. Just reload the page and it’s there.
2 Comments
  1. Reply Joseph June 21, 2016 at 11:09

    Angry? Is there a security risk when I upload them to our own sites as resources? I think not.

    Thank you for this plug-in. I am a huge fan of vector graphics over bitmap, and now with retinal display, making custom icon (not pre-made cookie-cutter stuff) is must.
    I have been able to do amazing things with the SVG’s without a hit on page load times.

    Now I have shared my utter joy over SVG’s I do have a question.
    Is there a way to to change color of these SVG files on hover?

    I would also like to point out that compressing the SVG before uploading as worked great.
    https://jakearchibald.github.io/svgomg/

    Big Thanks Again for your time. Hope you can find answer for my one question.

  2. Reply Sterling Hamilton July 5, 2016 at 16:33

    The “angry” part comes from a quote. “The story so far: In the beginning the Universe was created. This has made a lot of people very angry and been widely regarded as a bad move.” This is from a book called “The Restaurant at the End of the Universe”, the second book in the Hitchhiker’s Guide to the Galaxy comedy science fiction “trilogy” by Douglas Adams.

    I actually start all my projects with that quote. It’s normally an empty git commit.

    As for your concern, the main thing you ever have to worry about with SVG files is that they are capable of running Javascript. If you did not build the SVG, make sure you open it up with an editor and check the contents for anything odd.

    Finally, for your question, yes you can change colors.
    Since SVG files are just text, they are malleable. You can target them and their innards with CSS and Javascript and change various aspects of them.

    An easy way to get what you are after is to try and add a CSS class to the element within the SVG that you want to implement a new color on, then target it with CSS.

    If that doesn’t work, you can implement two SVG files on the same page. One with the color change, the other without. Then when you mouse over one, it swaps them.

    You can also embed SVGs into CSS, which allows you to do the color changes directly within your CSS file.

    Hope that helps!

Leave a Reply