An Easy Way to Import SVGs into Drupal

I outline a quick fix that will allow you to easily add vector images to your Drupal site.

The benefits of using vector graphics

There are three main reasons why developers and performance-conscious SEOs love scaled vector graphics (SVGs):

  1. They're lightweight: as vector images are just a series of graphical paths wrapped inside of XML markup, their network footprint is very light compared with raster formats. Even an elaborate illustration, rendered in SVG, would typically be no larger than a medium-length plain text file.
  2. They're inherently responsive: because a vector image is rendered via XML and not pixels, its size and proportions can be directly and easily manipulated via CSS, just like any other DOM content. This means that you do not need to create several versions of the same image at different sizes in order to ensure responsiveness on different viewports. Instead you just have one image with different CSS rules for the different screen sizes. Moreover, because the image is pixel-less there is no risk of fuzziness at breakpoints; instead the image will remain crisp and clear on all viewports.
  3. They're fast: due to their reduced file size, vectors travel fast and also load quickly because they are rendered as part and parcel of the DOM, not as a separate visual asset.

The problem

Unfortunately, there is no native functionality for SVGs within Drupal 8: you cannot simply upload a vector as you would a .jpg or .png.

Whilst there are modules that claim to allow you to upload SVGs as views or as additional content types (for example SVG Formatter and SVG Image), in practice I found them cumbersome and frustrating to use because they restrict where the SVGs can be placed and only really work if you want to use vectors exclusively as inline images and not as blocks.

This is problematic because SVGs are particularly useful for pan-site assets like logos and header designs since, as noted, they retain their resolution and aspect ratio accross viewports.

The solution

A more straightforward and performant approach is to eshew modules altogether and instead create a text editor specifically for SVG code which will output the SVG as a custom block that can be placed anywhere within your theme's layout.

For the purposes of illustration, we are going to use the dummy Drupal site Umami which is provided as an install option with Drupal 8, however you can follow along using your own Drupal site. We are going to replace the default header logo (a .png file) with an SVG of the Wu Tang Clan logo (🐝🐝🐝).

umami branding

The Umami header that we are starting with.

Step 1: Create the text editor

Navigate to Configuration → Text formats and editors:

drupal text editor interface

Text formats and editors

Then select Add a text format and insert the following values:

create svg editor

The permission parameters ('roles') are up to you but select 'Administrator' as the basic default.

Step 2: Upload your SVG

Now that we have created the editor exclusively for SVGs, we can begin using it to upload SVGs as blocks.

Navigate to Structure → Block layout and choose or create the region where you would like to add the SVG block. I will be using the 'Header' block because we are changing the site branding.

Click Add block in your chosen region and then select custom block in the pop-up. Then select block or the type of block you would like to use. (The specific block type doesn't matter because the SVG editor will be accessible within all block types.)

block types

Chose the most appropriate block for your purposes.

Select SVG upload in the Text format dropdown. Next, you need to paste the raw code of your SVG into the editor. In order to get the raw code, you will need to open your SVG in a desktop text editor such as Brackets or Atom, then copy and paste it in:

svg pasted in editor

Pasted SVG code.

Save it and then save your block layout. You now have a crisp SVG that you can insert anywhere within your site layout as a block!

new logo in header

The outcome: an SVG l/ogo image added to the site header.

Coda

I wrote this article primarily for a non-technical audience, hence the focus on blocks. Under this method however, you are not limited solely to block insertion. Once you have created the code-friendly text-editor you can use it elsewhere during content creation, for instance to create blogs and pages that feature inline SVGs.