A Walk Through SVG and its Usage in WordPress Websites

Retina displays have become the latest talk of the town. With more and more attention being paid to the concept of using retina displays, a majority of entrepreneurs have switched to usage of SVGs(Scalable Vector Graphics) in their corporate websites. We all know that mere failure to adjust the website images in accordance to the high resolution screens is something that can’t be avoided. It is quite essential to ensure that the SVGs are being utilized in a way that the images can be easily scaled up in a proper manner. So, if you’re running a WordPress powered website or are about to build one, do opt for adding SVGs which will make your website compatible with all retina-like screens. This is a post which highlights the significance of SVGs and their correct use in WordPress powered websites.

Exploring SVGs and their importance

Ever since its inception in the year 1999, SVG has been used by a majority of industry biggies like Apple, IBM and Adobe. It is basically a file extension for a vector graphics image file format that’s been created by W3C for describing images using mathematical equations. Available in some popular variants like SVG 1.0, SVG 1.1 and SVG Tiny(SVGT) and SVG Basic(SVGB), SVG uses XML(Extensible Markup Language) and has proved as a good option for improving display properties of every kind of website. Talking about the significance of SVG, it allows you to prevent your images from appearing as blurred on screens with different resolutions. The best thing about SVG files is that they are smaller and much more convenient to compress as compared to other file formats. Do note that graphics with SVG will be printed in higher resolutions. Also, you can gain access to a variety of tools like Notepad for editing SVG files. Images with SVG file formats are both, scalable and zoomable. And not to forget, like a variety of other graphics, SVG files also work as static or animated images.

Getting to know about some prominent advantages of SVGs

SVGs are fully scalable
With smartphones and tablets replacing the traditional desktops, SVGs serve as a great asset for responsive designs which need to target a wide collection of hand-held devices. Since SVGs are scalable, it becomes convenient for you to scale your logo or chart so as to adapt to different screens with high resolutions.

SVG doesn’t include fixed set of dots
Since SVG is defined by XML format and doesn’t comprise of fixed set of dots, it can be effectively saved as the smallest size, whatever is possible. That means, no matter how bigger your graphic gets, the XML that describes it will only be transmitted to the client.

Making changes to an SVG is quite convenient
Unlike other file formats, in case of an SVG, if you tend to make a mistake, you can easily make the required changes by altering the coordinates or words within the default/custom text editor.

Ideal for websites offering a lot of information
SVGs make it easy to create detailed graphics that can showcase multiple details impressively. And that’s not all. With SVG, you can make your illustrations look sharper as compared to other high resolution images. Vector graphics look great in print and are a lot easier to understand too.

SVGs are fuly accessible and search engine friendly
SVGs are completely accessible i.e. every text will remain text and something or the other appears even when the browser doesn’t support the website elements. Additionally, SVG code can be easily read and understood by both, humans and machines. Search engine giant Google, parses SVG’s instantly.

DOM handling is a complete breeze in SVG
SVGs come with a DOM making it convenient to attach event handlers in addition to altering elements as done for other HTML blocks. That means, in order to move a particular item, all you need to do is simply change the related co-ordinates.

The use of SVGs in WordPress website

By default, WordPress treats SVGs as a security threat and hence doesn’t allow you to add them to your media uploader. But, there is nothing to fear of. If you’re inclined on using SVGs in your WordPress powered website, then you can simply give ‘Media Library Uploader’ the permission to upload the files with SVG format. For this, all you need to do is simply open the theme’s functions.php (available within wp-includes folder) and add the below mentioned code snippet to it:
function wp_svg_fnc($arr = array() )
{
$arr[‘svg’] = ‘image/svg+xml';
return $arr;
}
add_filters( ‘mime_types’, ‘wp_svg_fnc’);
After having uploaded the SVGs to your WordPress website’s Media Library Uploader, you may face an issue wherein the SVG might either look very small or too large.

Let’s have a closer look at what happens after adding SVG in WordPress editor online

After you’re done with adding SVG in WordPress editor online, the default height or width attributes of all your images will be automatically set to 1px × 1px. This means that your images would practically become invisible.
Unlike the above scenario, using SVG in a custom field will make your images look large and they would exceed a proportional height value. To fix this issue, all you need to do is simply add the below mentioned code snippet to your WordPress theme’s functions.php file:

<?php
function wp_svg_style() {
echo ‘<style>
svg, img[src*=”.svg”] {
width: 120px;
height: 120px;
}
</style>';
}
add_action('admin_head', 'wp_svg_style');
?>
If you look at the above code carefully, you’ll find that I’ve added a small CSS declaration into the WP dashboard page. That means each time the selector finds <svg> elements along with .svg images, it will override default height and width attributes(i.e. 1px × 1px as set in WordPress editor, with no limits in the custom field) and also go ahead with adjusting the attributes to a box with dimensions 120px × 120px.
Do remember that the above step must be performed only under a scenario wherein you’re making your SVGs look better via a simple tool that helps in eliminating height and width attributes. Hence, while the tool eliminates the image attributes, you can go ahead with using CSS for managing the size of these SVGs.

Conclusion

In today’s retina-ready web world, equipping your website with SVGs is indeed an intelligent decision. Uploading and using SVG on your WordPress website is a practice that will help drive maximum traffic towards your web portal and people will love exploring your site to the fullest.