Observing the growing popularity of retina displays, it is becoming more important than ever before to build websites that support retina-like screens. In case you’re running a WordPress site that is most often visited by clients using devices with retina display, than using standard-resolution bitmaps images will make the images look ugly on those devices.

Currently, Apple products have a retina display with high pixel density making the screen sharper to the human eye. Since, a device with retina display makes a user enjoy a high quality and crisp imagery, many other mobile device manufacturers are expected to migrate to retina display.

Svg

But, merely talking about which device manufacturer is using retina display is not on our agenda in this post. Rather what we intend to explore is how SVGs (Scalable Vector Graphics) proves useful in making a site compatible to retina-like screens. And how you can upload and use SVGs in your WordPress website.

How SVG is Useful?

Since devices having retina display have much higher pixel density, the images on your site will look blurry if they’re not being adjusted for higher resolution screens. And thus, it becomes essential to make sure that images added into your site can be scaled up properly. For this purpose, you can utilize SVGs, which as the name implies, are scalable.

Although, the concept of SVGs is not new and have been around us for years, but not much attention has been paid to the concept.

So, what’s an SVG?

SVG latest

SVG is a type of image format for vector graphics on the web. It allows the vector images to scale up or down to any size or resolution – without affecting their quality and shape. Moreover, since vectors usually contain a fixed shape rather than pixels, they can be easily manipulated – keeping the images shape intact. However, raster images (images with JPG, GIF, or PNG format) cannot be scaled properly, and thus makes the image look ugly and blurred. This is where scalable vector graphics come to the rescue. Even though, SVG might not prove suitable for all image types but can help adapt your WordPress website for retina-like screens.

How to add SVGs in WordPress Site?

Unfortunately, WordPress doesn’t allow to add SVGs to the media uploader, as it treats them as a security risk. But there’s nothing to worry about as you use them in your WP powered site, by giving the ‘Media Library Uploader’ the permission to upload SVGs. For this purpose, you will have to open your theme’s functions.php (located in your wp-includes folder) and add the below given code snippet into that file:

function wp_svg_mime_type($mime = array() )

{

$mimes[‘svg’] = ‘image/svg+xml’;

return $mimes;

}

add_filters( ‘mime_types’, ‘wp_svg_mime_type);

Once you’ve uploaded the SVGs successfully to your site’s Media Library Uploader, you might run into a big problem. Wondering what? The problem is that the SVG will either look too small or pretty large.

Let’s elaborate, if you will add the SVG in the WordPress editor inline, the default height or width attributes will be set to 1px×1px, which means that your images will become practically invisible. On the contrary, in case you’re using an SVG in a custom field, your images will become too large, and will exceed the column column (and a proportional height). But you can fix this problem, by adding some CSS to your WordPress site’s Dashboard. For this purpose, just add the following code snippet to your functions.php file:

<?php

function wp_svg_size() {

echo ‘<style>

svg, img[src*=”.svg”] {

max-width: 120px !important;

max-height: 120px !important;

}

</style>’;

}

add_action(‘admin_head’, ‘wp_svg_size’);

?>

As per the code, a small CSS declaration will get added into your WP dashboard page. Whenever, the selector will find <svg> elements and images with .svg fomat, it will override the default width and height attributes (that is 1px× 1px in the your WordPress editor, and no limits in a custom field) and will adjust the attributes to a 120× 120px box.

A word of caution, make sure to perform this step only when you’re making your SVGs look better using some tool that eliminates the width and height attributes. So, if the tool removes such attributes you’ll have to use CSS to control the size of your SVGs.

Let’s Wrap Up!

Still thinking whether SVG is a viable alternative or not. Well, it definitely is in today’s responsive and retina-ready web world. In case you own a WordPress powered site that is maintained by you or any other trusted person, then uploading and using SVG on your WordPress site is a good practice. But, in case your site is accessible to all the users who can upload media and images in the site, then probably you can think of avoiding SVG uploads or your site will be under security risk. Hope this will clear your doubts on when exactly you should upload SVGs to your WordPress site.