1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 5.00 out of 5)

Scalable Vector Graphics (SVG) in WordPress

Scalable Vector Graphics *

I was recently asked if you can use Scalable Vector Graphics in WordPress. Scalable Vector Graphics or (SVG) is an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation. The answer is yes you can but you have to insert a code into your functions.php file in order for this to happen. You can go to your dashboard then hit appearance then editor and select the functions.php on the right. You can then insert the code below into your functions file and click save. Next go to media and upload your SVG or Scalable Vector Graphic to your media and you should be good to go.

function cc_mime_types( $mimes ){
 $mimes['svg'] = 'image/svg+xml';
 return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

Benefits of using Scalable Vector Graphics *

  • Small files compress very well
  • When scaling to a different size you keep the resolution

Use of Scalable Vector Graphics *

After creating a Scalable Vector Graphic in a program like Adobe Illustrator you can use an image tag to insert it into your post or webpage.

<img src="thevector.svg" alt="This is a vector graphic">

To get more details on scalable vector graphics please check out Chris Coyers article on SVG

You may be able to use scalable vector graphics in slide show plug-ins like “slideshow” or “meteor slides” for WordPress.

Subscribe To My YouTube Channel:
Scalable Vector Graphics (SVG) in WordPress was last modified: October 11th, 2013 by Maximus Mccullough

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

scalable vector graphics

1 Comment

  • jerry says:

    Looks like I have a lot to learn. I am finally getting to the point that I can find the time of each page to band energy to put into the site. Am anxious to get my content of each page to reflect my purpose.
    Respectfully, Jerry

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.