The benefits of using vector graphics
There are three main reasons why developers and performance-conscious SEOs love scaled vector graphics (SVGs):
- 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.
- 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.
- 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.
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.
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.
Step 1: Create the text editor
Navigate to Configuration >> Text formats and editors:
Then select Add a text format and insert the following values:
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.)
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:
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!
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.