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.

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

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.

[code]<img src="thevector.svg" alt="This is a vector graphic">[/code]

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.