How to Safely Use Vector Images with WordPress

Adding custom graphics and illustrations to your Divi website design can really help enhance the visual appeal. But finding the right image assets or hiring a designer isn't always feasible. Fortunately, Divi makes it easy to create your own vector images and illustrations right within the builder.

In this guide, we'll explore how to actually implement SVG without compromising your website.

Even if you don't have design experience, you can make professional, high-quality vector images to really take your Divi website to the next level visually.

Introduction To SVG & Its Uses

SVG stands for Scalable Vector Graphics. It is a widely used XML-based vector image format designed to describe two-dimensional vector graphics. Unlike raster image formats (such as JPEG or PNG) that use pixels to represent images, SVG uses mathematical equations to define shapes, lines, and colors, making it a resolution-independent and highly scalable format.

Here are some key uses of SVG in website design:

1. Responsive Graphics: SVG images are resolution-independent, which means they can be scaled up or down without losing quality. This makes them perfect for responsive web design, where content adjusts to fit different screen sizes and resolutions.
2. Icons and Logos: SVG is commonly used for icons, logos, and other graphical elements on websites. Since SVG files are small in size and can be easily customized and animated with CSS and JavaScript, they are a popular choice for creating interactive and visually appealing user interfaces.
3. Retina and High-DPI Displays: SVG is ideal for displaying crisp and sharp graphics on high-DPI (dots per inch) screens like Retina displays, where traditional raster images might appear pixelated when scaled up.
4. Animation: SVG allows for the creation of complex animations directly within the XML code using tools like CSS animations or JavaScript libraries like Snap.svg and GreenSock Animation Platform (GSAP). This makes it possible to add dynamic and interactive elements to a website.
5. Accessibility: SVG images are easily accessible to screen readers and assistive technologies because the underlying XML structure can be annotated with descriptive text, making websites more inclusive and usable for people with disabilities.
6. SEO Benefits: Search engines can parse and index the content within SVG files, which can improve search engine optimization (SEO) by providing more context to search engine crawlers.
7. Interactive Data Visualization: SVG can be used to create interactive data visualizations, such as charts and graphs, which can help convey information effectively on a website.

In summary, SVG is a versatile and powerful format for creating and displaying vector graphics on websites. Its ability to scale seamlessly, work well with various screen sizes and resolutions, and support for animations and interactivity make it a valuable tool in modern web design and development.

Ways to Safely Use Vector Images With WordPress

In this part, we'll look at two methods for using safe SVG in WordPress: manually and via plugins. The best choice for your needs will then be presented to you for selection. Let's start now!

Add SVG Support Manually and Sanitize Your Code

With a small piece of code, SVG support can be added to WordPress in a matter of minutes. This would expose you to the possible safety concerns we already highlighted. The following actions are required to implement SVG in a more secure manner:

1. Make changes to your functions.php file to enable SVG support.
2. Disallow the desired user roles from uploading svg files to WordPress.
3. Before uploading any SVG files, sanitize them all.

Overall, it's not difficult to complete steps one and two. The first step is to connect to your website using File Transfer Protocol (FTP) and find the root folder for WordPress. Find your functions.php file there, open it, and paste the following code into it.

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
 
  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }
 
  $filetype = wp_check_filetype( $filename, $mimes );
 
  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];
 
}, 10, 4 );
 
function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
 
function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

With this, you can upload SVG files to WordPress and see them in your media library, serving two purposes. After adding the code, close your functions.php file and save the modifications.

Now that we need to stop people whose uploads we don't trust from being corrupted, things become a little more challenging. You might, for instance, have faith in your editors and authors to upload accurate files, but not in your contributors. There are two approaches you can take here:

1. Establish unique user roles for users with restricted or no access to the Media Library.
2. To restrict the kinds of files each user role can upload, install a plugin like WP Upload Restriction.

It is true that both strategies have drawbacks, which is one of the reasons manual SVG implementation might be challenging. But if you choose a strategy to stop malicious SVG uploads, you also need to make sure you don't accidentally use it.

Ideally, you should use a sanitizer tool before uploading any SVG to your website. This will take your file, check to see whether it contains anything questionable, and then delete it if it does. In the end, you'll have a tidy SVG file that you can finally submit to WordPress.

Using Safe SVG Plugin

We intended to demonstrate how difficult safe SVG implementation may be by using the aforementioned method. This is necessary so that you can fully understand what the Safe SVG plugin performs.

the plugin for Safe SVG. In a nutshell, the difficulties we previously stated are all addressed by this plugin, including:

1. Making it possible for you to upload SVGs.
2. Verifying that your SVGs are visible in the Media Library.
3. Cleansing the source code of each SVG you upload to avoid security flaws. This plugin is essentially plug-and-play in nature and takes the simplest route to secure SVG implementation in WordPress. We advise you to attempt it if you're determined to use SVGs.

Animating SVGs Using CSS and Plugins

If you go to the work of integrating SVGs into WordPress, you'll undoubtedly want to maximize your return on investment. This means that, when appropriate, you should animate your SVGs using CSS. There are two approaches you can take, which we've previously discussed:

• SVGs can be manually animated with CSS just like any other element.
• Use programs like SVGator to create and animate SVGs.

If you're willing to try some new things, adding a few animations here and there can greatly improve the user experience on your website. However, adding videos or GIFs would be considerably worse for mobile devices than utilizing SVGs and CSS to achieve this.

Conclusion

With the ability to build custom vector graphics directly within the Divi builder, you have a powerful way to create illustrations and icons for your site without any design expertise needed. Implementing these original graphics can lend your pages and posts a more unique, personalized aesthetic. You'll be surprised just how professional your DIY vector graphics can look!