Custom SVG logo block plugin for the WordPress full site editor

Installation steps

1. Download the plugin .zip file here | (Virus total scan)
2. Upload to your plugins directory
3. Activate the plugin
4. Add the Custom SVG Logo Block to your full site editor
5. Paste in your SVG code
   • Ensure that width and height attributes are set for the SVG icon within the code
6. Customize your SVG path colors with CSS
   • Add inline styles or classes to your SVG paths in order to color them properly
7. Add your home link to the SVG in the block settings sidebar
8. Add your title tooltip text to the logo link in the block settings sidebar
9. Save your template and view changes

The days of uploading raster images for your logos are over. It’s time to start using high quality SVGs for your website logos, if you haven’t already. Seeing blurry logos on the web should be a thing of the past!

I wanted something super simple, quick, and super easy to use when it comes to displaying SVG logos on my websites. With this plugin I made for my own use, I can simply select the entire logo from Adobe Illustrator, copy it, and then paste the SVG code directly into the plugin’s settings panel SVG code box. The logo will display properly on the back end and front end of the website, unlike the custom HTML block that will only display code in the back end and not an actual rendered view of the logo.

My website header is currently using this plugin, so you should try it out for yourself and see how it works.

Customizing the color of your SVG logo

The styles of your SVG logo should be managed with the additional CSS panel of the WordPress full site editor, or you can add them to your style.css theme file.

If you want to customize the fill paths and hover of your SVG logo, you could add something like the CSS below to your CSS file. I usually just add an ID of “logo” to my main SVG element and then target the paths that way, but you can also use the custom SVG logo block’s class wrapper of “.wp-block-custom-svg-logo-logo svg path” to target the paths.

Example code to style the SVG logo

/* SVG logo main */
svg#logo {
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

/* SVG logo main fill color */
svg#logo path {
    fill: red;
}

/* SVG logo hover fill color */
svg#logo:hover path {
    fill: blue;
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

Now with this new plugin, I can quickly display crispy, high quality SVG logos on all of my new modern WordPress block theme websites in just a few minutes. C ya later, Custom HTML block. 😋