How To Enable SVG Files In WordPress Without A Plugin
What To Expect From This post:
1) In this post, I will show you how to enable SVG files in WordPress without the use of a plugin.
2) The benefits of using SVG images instead of JPG and PNG.
3) Why SVG is not allowed in WordPress
4) The code snippet that will enable you to upload SVG files into your WordPress media library.
5) Where to add your code.
PLEASE NOTE!
The code that we are going to add to our functions.php file will get removed whenever you update your theme.
So you have 2 options to avoid losing your code:
1) Use a child theme and save the code there. For more info on child themes please check this website to get a free child theme and to see what a child theme is.
My favourite plugin for creating a child theme is the “Child Theme Configurator“. You can download the plugin for free here.
2) You can paste the following code into your functions.php file every time you update your WordPress theme.
Why Should You Use SVG Files Instead Of JPG and PNG?
1) BETTER QUALITY
As SVGs are vectors, they can be scaled, stretched or shrunk without ever losing or compromising image quality, even on retina display screens. As they preserve their pixel-perfect appearance, SVGs are great for responsive web design. In comparison, raster image formats will look blurry or pixelated if scaled larger than the image size.
2) BROWSER SUPPORT
Browser support for SVG files is great, with all browsers knowing how to support the format. This means that a high percentage of your site visitors will have no problem viewing an SVG on your website.
3) SMALL FILE SIZE
One of the most vital aspects of web design is page load speed and website performance. SVGs have a far smaller file size as opposed to raster-type images and thus will help a website load faster and will not contribute to a slow website. Of course, SVGs can’t be used to replace all graphics on a website, but saving a few bytes here and there with small-sized graphics adds up in the long run.
↓
Why Is SVG Not Allowed In WordPress?
Small, compact, pixel-perfect and animation-ready, in theory, the SVG seems to be the best image format to use in a website, however, WordPress doesn’t support the file format by default. This is actually for good reason.
Disallowing the SVG file format is, in fact, a vital security measure as SVGs can be insecure and can put an entire site at risk. As described above, the SVG is not actually an image format as most people think, but is a document format (XML) that reads as code.
With this, SVGs can be scripted to include malicious code and other vulnerabilities or injected with malware. As this can pose a huge threat to a website, WordPress does not support the file type in its native state.
If you would like to read more on why SVG is considered a “threat”, please feel free to check this post out.
Where To Add Your Code
1) Navigate To “Theme Editor”
In the sidebar menu on your WordPress dashboard, navigate to the theme editor.
Appearance > Theme Editor (check image below).
↓
2) Click on the “Functions.php” file
On the right-hand sidebar area, click on the file that’s called functions.php (look at the image below).
Once the functions.php file has loaded, scroll right down the bottom of the file.
Add another line by pushing “ENTER” on your keyboard. This is where we’ll add our code.
↓
3) Paste the following code
function cc_mime_types($mimes) {
$mimes[‘svg’] = ‘image/svg+xml’;
return $mimes;
}
add_filter(‘upload_mimes’, ‘cc_mime_types’);
4) Save
Save the file by clicking “UPDATE FILE.”
AND THAT’S IT!
Now you know how to enable SVG files in WordPress!
Need A Website?
We specialize in designing highly professional websites for small to medium-sized businesses at an affordable cost.
Only pay us for the job once you are 100% satisfied with your new website.
We offer a lifetime after-sale support service for all of our customers.
Free Tutorials
For more useful tutorials just like this one, go check out our Blog page where you’ll find a whole bunch of awesome goodies, to help make your website friggen AWESOME!
Newsletter
Subscribe to our newsletter if you would like to join our mailing list where you will receive things like specials, giveaways, and news. Don’t worry, we will NEVER send you any spam.
0 Comments