CSS

A Walk Through SVG and its Usage in WordPress Websites

Google+ Pinterest LinkedIn Tumblr

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.

Author Biography

Amanda is currently working for Xicom Technologies Ltd- a renowned iPhone app development company. She has been an avid IT personnal with special interest in writing posts that serve as handy guide for individuals looking out to build a strong career in IT services and solutions sector.

I am a frontend and backend web developer who loves building up new projects from scratch. In my blog "Lingulo" me and some guest authors regularly post new tutorials, web design trends or useful resources.

Subscribe
Notify of
guest
35 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
World4free
5 years ago

Amazing article! I like the way you write.

Kaise kare
6 years ago

Wonderful article. I need to bookmark this site right away.

Kyakaru
6 years ago

Thank you Sir.

iOS App development company

Being new to the blogging world I feel like there is still so much to learn. Your tips helped to clarify a few things for me as well as giving..

15 August Images
6 years ago

thanks for this

Anna University
7 years ago

Wonderful tutorial thanks to share

Govt recruitments
7 years ago

Thanks for sharing such a tips on usage of wordpress websites.

govjobhunt
7 years ago

Scalable Vector Graphics SVG I was not aware of this but a really good write-up on this topic and making us aware of the same. BTW which theme is this looking cool….like you

doonedin
7 years ago

svg looks great..

habeeb
7 years ago

amazing article I appreciate you sharing this article

mahesh
7 years ago

Nice information moslty users are looking for the info on google so here i suggested you keep updates dialy to get followers

4vnu
7 years ago

great post and information. Thanks to you buddy.

suman
7 years ago

Most satisfied tutorials available on internet for the current topic. I am a regular user of WordPress website. And also admit of of different website. I know very well uses of SVG and WordPress.

Gmail
7 years ago

Thanks for sharing useful information

employmentnews
7 years ago

Keep sharing new things to here mate. i m just refreshing it

Govt Jobs
7 years ago

Thanks for the information

Cbse Class 12 Result 2016

Thank Guys.

govt Jobs
7 years ago

Thank you For Posting On WordPress. I Need it

Latest Jobs
7 years ago

Thank you for Posting . cheers

rrb result
7 years ago

this is nice.

jobshelp
7 years ago

Thanks for the information

Amar
7 years ago

Awesome news..

keyresult
7 years ago

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.

hiall
7 years ago

hi nice post and great information shared

Pohl Christian
Pohl Christian
7 years ago

Hi,
Danke für den informativen Artikel. Fehlen dabei tun mir aber einige Beispielwebsites, welche die SVG-Integration in WordPress auch implementiert haben.

Sarkari Naukri Search
7 years ago

Awesome post. Thanks. Govt Jobs

jee main 2016 answer key

this is awesome.

reet result
7 years ago

wow article thanks for sharing with us.

reet result
7 years ago

awesome information in this post thanks for sharing with us.

results 2016
8 years ago

nice post and great information shared

hiall
8 years ago

information shared to us is great

Govt Jobs
8 years ago

Nice Information in the post

egovtjobs
8 years ago

Awesome Information in the post

Indian Jobs
8 years ago

Amazing Information in the post

Rawat
7 years ago
Reply to  Indian Jobs

Great Jobs website, I just checked this one.