Smart SVG Installation Instructions

  • Important: Never open your SVG files in Adobe Illustrator and save the file, as this will overwrite your smart behavior code.

  • Code Samples are available on the Equivalent SVG Github

  • Ensure that your SVG is defaulting to the correct mode (light vs. dark) for the installation environment.

  • Be sure to install a dark theme on your website before adding our Smart SVG™ files. If you don’t have a dark theme, please select “no inversion” to keep your design from changing.

Topics:

Basic Methods

There are many ways of implementing SVGs on the web, however, only some methods are accessible. For example, embedding an SVG using an <object> tag, using an <iframe>, or using a CSS background are not accessible implementations. The two accessible implementations are either in-line or use <img> tags. These two methods each have their own advantages and disadvantages.

1. In-line: The actual markdown of the .svg is inserted into the HTML of the site.

Advantages

  • Best cross-browser compatibility

Disadvantages

  • The image can not be cached by the browser and is redrawn every time the page is loaded.

  • Can be weighty as it adds to the overall size of the page markdown.

2. Using an <img> tag.

Advantages

  • The Image is linked to, just like any other image and is cache-able for faster subsequent load times.

Disadvantages

  • Internal CSS media-queries in the .svg file are ignored by the Safari browser on Mac.

  • CSS required for full Safari functionality removes the fluid nature of the file in Dark-Mode.

Markup for Each Method

Method 1: In-line method:

Copy and paste the markdown in the attached documents where you would normally place an <img> tag. The SVG is internally programed to fill the width of its containing <div> tag so no additional CSS is required unless adjustments are desired.

:root {
    --aspect-ratio:  3000 / 472;
    --logo-height: clamp(28px, 2.5vw, 34px);
    --logo-width: calc(var(--logo-height) * var(--aspect-ratio));
}
#MySvg {
    height: var(--logo-height);
    width: var(--logo-width);
    display: block;
}

Method 2: Using <img> tag method:

SVGs can be linked to with a regular <img> tag just like any other image file type. 

Upload file to server and place below markdown in site code where you want the logo to appear.

Place logo’s file-path in the quotes for the href=” ”

Markup:

<img id=”mysvg” src=”images/my-logo.svg” alt=”My SVG.” />

Associated CSS for <img> tag implementation (place in Site CSS document):

img#mysvg {
    display: block;
    width: 100%;
    max-width: /* input desired width here */;
    height: auto;
}

Wordpress Installation

The default Wordpress tool for adding a logo to your navigation (found under the “Site Identity” section) does not support the SVG file type. If you attempt to upload an SVG, the error message reads “Sorry, this file type is not permitted for security reasons.”

There are several options for solving this issue.

Method 1: Installing a Plugin

You can install a plugin that allows SVG uploads, such as the “SVG Support” plugin. With this method, you can upload your Smart SVG to the “site identity” section of the appearance customizer.

Method 2: Editing Your Wordpress Theme

If you have a custom logo uploaded into the appearance editor of your Wordpress site, remove it and disable the “Display Site Title & Tagline” checkbox.

Connect to your Wordpress site using an SFTP client of your choice.

By default, Wordpress inserts an into the header area of your page by referencing the file uploaded as your “custom logo” in the Wordpress backend using the following code snippet.

<?php if ( has_custom_logo() && ! $show_title ) : ?>
	<div class="site-logo"><?php the_custom_logo(); ?></div>
<?php endif; ?>

This piece of code needs to be replaced with one that displays the smart SVG. You can most likely find this code in the “theme -> template-parts -> header -> site-branding.php” file in your theme, though each wordpress theme can have a different file structure so it may be located elsewhere.

Upload your Smart SVG into a directory of your theme (recommended: upload to the theme -> assets -> images directory).

Replace the above code with the following:

<img id="NavLogoSmartSVG" src="<?php echo get_template_directory_uri(); 
?>/assets/images/[your_smart_svg].svg"/>

Replace the file path (in red above) with the file path in which you uploaded your smart SVG. You can set the ID of the element to any name you want. Your logo should now be inserted into the page, but it won’t be visible because it is displaying at a width of 0px by 0px.

To modify the size of your logo and have it responsively resize, go to the “Custom CSS” section of the appearance editor and add css that targets the element ID to adjust the size. Add media queries to define breakpoints and resizes.

Method 3: Full Site Editor Beta

Wordpress has a beta feature that allows you to directly edit the header and footer of your page without having to edit the theme. Note that this is only supported by themes that are compatible with the Full Site Block Editor. You must also have the “Gutenburg” plugin installed in Wordpress, though the plugin is included by default so you may already have it installed.

Go to the sidebar of the Wordpress and scroll down to the “Appearance” tab. Click the “Site Editor” button. Tick the checkbox to enable the Site Editor beta and save.

Go to the sidebar of the Wordpress and scroll down to the “Appearance” tab and click the “Editor” button.

Click into the header and use the “add block” button to add a “custom HTML” block. Paste your SVG code into the custom html block.

Your svg may display using the full width of the page. To fix this, add code to the responsive resize media queries in your svg that targets the ID of the svg and adds a “with” value, like so:

@media screen and (min-width: 1024px) {
	#logo-with-tag {
		visibility: visible;
	}
	#logo-stack,
	#logo-icon {
		visibility: hidden;
	}
	#fluidform {
		width: 200px;
	}
}
@media screen and (max-width: 1023px) {
	#logo-icon {
		visibility: visible;
	}
	#logo-with-tag, #logo-stack {
		visibility: hidden;
	}
	#fluidform {
		width: 50px;
		aspect-ratio: 108 / 145;
	}
}

Method 4:  Elementor

  1. In the sidebar of your wordpress admin panel, scroll down to “pages” and click “all pages.” 

  2. Then, in the list of pages, click the three dots to the right of a page and click the “edit button.” 

  3. In the preview area, click the button that says “edit with elementor.” 

  4. In the sidebar of elementor, click the hamburger menu in the upper left corner. Click “site settings” and then click “site identity.” 

  5. Under “site logo,” click the “Upload SVG” button. Upload your smart SVG, and save changes.

Smart SVG™ Favicon Installation

Method

Installing a Smart SVG™ favicon that responds to light and dark made as well as Windows contrast themes is a bit involved, but worth the effort. It requires the .svg favicon, an .ico favicon, three .png fallback favicons, some link elements that get placed in your website’s header and a JSON web app manifest.

This is a list of the files, their names and dimensions (Note: names need to be as shown):

  • favicon.svg: 600x600

  • favicon.ico: 32x32px

  • apple-touch-icon.png: 180x180px

  • android-chrome-192x192.png: 192x192px

  • android-chrome-512x512.png: 512x512px

The web app manifest is fairly simple and is only for the “android-chrome” .pngs:

{
    "icons": [
        {
            "src": "/s/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/s/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

The manifest file should be named title.webmanifest (we use site.webmanifest).

The following set of links should be placed in the header of the website’s index page (note “file path…” should be updated with the files actual path):

<link rel="manifest" href="file path…/site.webmanifest">
<link rel="icon" href="file path…/favicon.ico" sizes="32x32">
<link rel="icon" href="file path…/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="file path…/apple-touch-icon.png">

Best practices:

  • The .ico file type, while still used, isn’t supported by many graphics applications without the aid of additional plugins. There are also quite a few web-based apps that can convert a .png into an .ic as well.

  • For the apple-touch-icon it is recommended to add 40px of extra space, ie 20px on each side of your favicon to prevent it from being cropped.

Universal CSS for Light/Dark Mode and Forced Colors

Place the CSS below into the site’s master CSS file. It is likely that your site already has styles for the “body” element. The below can be added to those styles.

Dark-Mode

The style below tells the browser that the site can have it’s appearance adjusted by the user switching to “Dark-Mode”:

The media query below is where dark-theme specific site styles are defined.

body {
    color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
    body {
        [dark-theme styles go here];
    }
}

Forced-Colors/High-Contrast/Custom Contrast Mode

The media query below sets the text, and background color of the site to user-specified colors when using high-contrast-mode on a PC. The header logo svg has similar code to change colors to match the user's “CanvasText” setting.

@media (forced-colors: active) {
    p, h1, h2, h3, h4, h5 {
        fill: CanvasText;
    }
    body {
        background-color: Canvas;
    }
}