1
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.
2
Evaluate Graphic Location
Know the environment where your SmartSVG™ 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 SmartSVG™ may not need a dark mode version.
3
Responsive Resizing
People experience the internet using a variety of devices with various screen sizes and resolutions. SmartSVG™ 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 SmartSVG™ to be swapped out when displayed below a certain breakpoint.
4
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.
5
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.
6
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.
Image FAQs
SVGs or ‘Scalable Vector Graphics’ are vector-based artworks that take all that geometry and math-based information and turn it into a computer code called XML. Since the artwork is now a small parcel of code, SVGs can be optimized to load extremely fast. Implementing your SmartSVG™ code file into your website then displays the actual “scalable vector graphic” image on your website. Basically, it's code that displays a graphic; it’s kinda magic!Your SVG graphics look crisp no matter how far you may zoom in on the design. It will resize and render to look high-resolution on every retina display.
There are two types of graphic images: Pixel (or Raster) and Vector. Pixel images lose clarity when zoomed in and can be challenging for a low-vision person to see and understand. Vector files look crisp no matter how far you zoom in on every retina display. SVGs are vector files. PNGs are raster files.
Most graphics fail accessibility because they lack semantic structure, text isn't readable by screen readers and users can't navigate or select content. Equivalent's SmartSVG™ technology builds this in automatically with selectable text, keyboard support and screen reader announcements, adapting to user settings so you avoid manual alt text or compliance retrofits.
Yes, adapts instantly to system themes, CSS variables or user color preferences (used by 56M daily, 50% of low-vision users). Energy savings up to 28-63% on OLED displays.
Images typically account for over 50% of page weight, causing slow loads especially on mobile or slow networks, plus higher hosting/CDN costs. SmartSVG™ replaces them with files up to 99% smaller that scale across all devices in one lightweight file, slashing load times and bandwidth without losing visual quality.
Regular images either don't adjust or they break in dark mode, colors clash, contrast fails and you need separate light/dark versions bloating your asset library. With Equivalent's SmartSVG™ technology, the images can actually detect system themes and CSS variables instantly, adapting colors and contrast on-the-fly from a single file, no duplicate exports or media query hacks.
Raster images guzzle data transfer energy and oftentimes ignore display optimizations like dark mode, contributing to internet emissions at scale. A SmartSVG™ cuts transfer energy with tiny files and adapts to dark mode (28-63% display savings), potentially powering thousands of homes yearly from optimized enterprise sites.
Device fragmentation usually means exporting @2x/@3x versions and still getting pixelation or bloat, plus reflow issues on resize. One SmartSVG™ file scales infinitely with perfect sharpness across mobile/desktop/high-DPI/legacy browsers, eliminating asset variants and ensuring consistent performance everywhere.
AI tools typically output heavy PNG/JPG rasters that aren't editable, accessible or optimizable, creating storage nightmares as volume explodes. Our SmartSVG™ technology converts them into lightweight, editable vectors that stay production-ready with semantic structure and theme adaptability.
SmartSVG™ FAQs
Regular SVGs are static vector files. A SmartSVG™ adds patent-pending adaptability, automatically responding to dark mode, custom colors, screen readers and device settings in a single tiny file. No manual variants or CSS overrides needed.
Yes, SmartSVG™ handles dynamic data, hover effects, transitions and even real-time updates while staying lightweight and accessible. It works across all major browsers and devices today.
Built-in semantic structure makes text selectable/indexable, supports keyboard navigation, and announces properly to screen readers. It adapts to user preferences (high contrast, large text) automatically.
Up to 99% smaller than raster equivalents (e.g., 1MB PNG → 61KB SmartSVG™; 50KB → 340 bytes). One file serves all devices, themes and resolutions, no asset proliferation.
Our API is available for beta testing. Share your use case via contact form for access details, integration guides, and a free analysis of your current image stack.
Yes, adapts instantly to system themes, CSS variables or user color preferences (used by 56M daily, 50% of low-vision users). Energy savings up to 28-63% on OLED displays.