Oombla DocsMenuoombla.com

Base64, SVG and Mini-SVG

The base template for exporting assets as SVGs, Base64 or MiniSVG format

The Base64 and Mini-SVG template class is used to build the final download for Sass and TailwindCSS. In this class, each asset is exported as its own entity (even if it’s part of a variant collection). There are seven props made available for each asset:

  • name <string>
  • base64 <string>
  • svg <string>
  • svgMini <string>
  • width <number>
  • height <number>
  • hasRaster <boolean>

name

The name of the asset. This should always be present is in kebab-case format.

base64

This is a Base64 string representation of the asset. It can be used like so:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);

Though you should most likely use the svgMini value in this type of scenario: Probably Don’t Base64 SVG.

svg

This is the full SVG utf-8 string. This is handy if you need to just copy the SVG source from the preview manifest.

"Screenshot of the plugin where you can copy the SVG code."

svgMini

This is the URL-encoded version of the SVG which is smaller than both the Base64 and original SVG version. This is the value that is recommended to be used in the final template output. (More on this approach: Optimizing SVGs in data URIs.)

width & height

The original width and height of the asset.

hasRaster

This is a true/false value that tells you whether or not the asset has any raster elements in it. At this point, this is more of a quality control check to let you know if an asset has any unexpected raster elements included in it.