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.

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.

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.

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.

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;
}