Learning Center
What is a Smart SVG™?
Smart SVGs are accessible, light-weight, responsive, shapeshifting image files. These clever graphics respond to various screen sizes and personalized accessibility settings, such as dark mode.
Through custom media queries, Smart SVGs respond to a user’s accessibility settings. In this way, Smart SVGs will adapt when a user prefers dark mode to reduce eye strain, or has chosen custom colors with high contrast for increased visibility or low contrast to ease migraines and photosensitivity.
Smart SVGs also use media queries to respond to screen sizes with designs that can change in size and layout. They can also work with assistive technologies, such as screen readers.
View our Installation Instructions for Smart SVGs™.
Tips for Vector File Optimization
Tips for Logo File Optimization
Tips for Icon File Optimization
Tips for Illustration File Optimization
Tips for Favicon File Optimization
Alt Text
Your team will provide alternative text descriptions for all SVGs, unless they are marked as purely decorative. For illustrations that require extended descriptions, Equivalent allows an optional, additional long description. Our goal for any graphic description is to make sure that everyone has an equivalent experience. Alt text is capped at 250 characters and it is advised to use approximately 125 characters. Long descriptions are capped at 2500 characters. Your SVGs will meet WCAG 2.2 Success Criteria 1.1.1 Non-text Content to have either an alternative text “alt text” or to be marked as purely decorative.
For additional information on alt text, refer to WCAG 2.1 SC 1.1.1. For best practices on writing alt text follow W3Cs alt text tutorial, and if you need help deciding what type of alt text to choose use the alt Decision Tree.
Evaluate Graphic Location
Know the environment where your Smart SVG will be located, since this also impacts the graphic’s design. For example, if a graphic is going to be placed in an area where the default background is already dark (like a header or a footer) then your Smart SVG may not need a dark mode version.
Responsive Resizing
People experience the internet using a variety of devices with various screen sizes and resolutions. Smart SVG can adapt to the best possible layout for the user’s device through the use of media query breakpoints, the screen dimensions that trigger alterations to the graphic. When using our software you can upload a second image which is built into your Smart SVG to be swapped out when displayed below a certain breakpoint.
Light Mode
For the majority of graphics, the original design is created for Light Mode environments. This refers to a light background with dark text and graphics, and is the default setting for most user interfaces. This is the design version we ask you to upload into the software. Our software will then automatically walk you through designing a dark mode version of your image.
Dark Mode
Dark mode is an accessibility feature that allows a user to change the color theme of an app or operating system to a darker color theme. It reduces visual complexity that can cause eye strain, and helps users with sensitivity to light. Our software allows you to upload a light mode version of your graphic and it will instantly calculate a dark mode version for you to customize as desired.
TIP: Be sure your website or app has a dark theme installed before you install your Smart SVGs.
Dark Themes
The terms "dark theme" and "dark mode" are used interchangeably, and can cause confusion."Dark theme" is a design term that refers to the CSS color palette consisting of darker colored backgrounds and lighter colored foreground elements. "Dark mode" is a term that refers to an OS, app, or browser setting that triggers the "dark theme" to display for the user.
However, websites and apps can be designed with any colors as their default, including using dark backgrounds and light text resembling a “dark theme”. This means that the website or app will always be displayed in the dark colors in which it was designed, whether or not a user has chosen a light or dark mode.
By contrast, some websites offer both a "light" and "dark" theme, and they let the browsers know this through a simple media query allowing the user’s preference to be displayed. This is what we mean by ensuring your website has a "dark theme" feature installed before choosing to add the “dark mode” option for your Smart SVGs. The “dark mode” version of your Smart SVG will be invoked by the browser, hopefully matching the behavior and color changes of your website interface. Without an actual “dark theme” and not having the background colors changing behind your image — issues could arise with a low contrast scenario ie: images disappearing!
If your website only has a dark color palette, and does not indicate it in CSS, your Smart SVG will load in the initial state. In that case, design your SVG to match your website, and do not select the dark mode option. You may still add the mobile responsive feature if you have a mobile version of your image.
Please review our full Glossary of terms for additional information.
Designing for Accessibility & Inclusion
The design stage will build the foundation for your Smart SVG. Following best practices for accessible and inclusive design prevents the need for costly corrections later in the production workflow. We recommend studying best practices for accessible graphic design, which covers topics like the best fonts for dyslexia and optimal colors for colorblind users.
Contrast Themes
Contrast Themes is a Windows desktop system setting that allows a user to choose a background color and a text color. Hypothetically, Contrast Themes can display any color combination. Many low vision users prefer black backgrounds with bright yellow text to increase contrast. Alternatively, some users may choose a very low contrast theme, such as a tan background with sepia text, to reduce headaches and eye strain. Planning ahead for contrast themes allows you to anticipate both ends of the spectrum by simply using good contrast and luminosity within your graphics.
Our software will automatically build in a response to the users request for custom colors so that your image will respond accordingly. This means your graphic will look like itself with the same tonalities but it will also change color to match the users preferences.
Note: User OS settings such as Contrast themes can cause the appearance of an image to change dramatically. An organization needs to be aware that their branding could be impacted by different user selected colors, and must accept that a small percentage of users may see their brand or other graphics in alternative colors. A great argument for this feature could be that this is the very first time a low vision user can see your logo or images!
“People with some visual or cognitive disabilities need to be able to select the color of text and the color of the background. Control of color or other aspects of presentation makes a huge difference to their comprehension.”