Smart graphics

Our Smart SVG™ technology supports dark mode, user selected color themes, and responds to OS-level settings, mobile devices, and assistive technologies.

Smart Scalable Vector Graphics (SVG)

We revolutionize SVGs by ensuring dynamic responsiveness, accessibility and ADA compliance. This ensures that our graphics are accessible to all users, regardless of their abilities, and adapt seamlessly to different devices and user settings.

Responsive

  • Responds to screen sizes and layouts

  • Responds to dark mode at the OS level

  • Can be optimized for speed and SEO

Beautiful

  • Scales beautifully when magnified - crisp and clear at any size!

  • Can be your logos, icons, illustrations, and favicons!

Accessible

  • Dark mode is an accessibility feature

  • Alt Text is screen reader accessible

  • Works in Reader Mode on all browsers

  • Matches user-preferred colors themes!

  • Matches personalized accessibility preferences and device screen size

Efficient

  • Can be optimized under 10kb!

  • Smart SVG™ can replace many versions of the same image (such as light and dark mode mobile versions) into a single dynamic file.

What is an SVG?

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 Smart SVG™ 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.

Pixel vs Vector

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.

Enlarged pixelated graphic of a cat.

Pixel

This image is pixel-based, which uses a number of colored squares specified by resolution. When a pixel-based image is resized it can become blurry or “pixelated.”

Vector artwork of cat showing points and lines.

Vector

This image is vector-based, which uses math to determine the lines in the artwork, resulting in clean edges no matter what size the artwork has been scaled to.