Skip to content

Instantly share code, notes, and snippets.

@tobiasvogel
Last active August 2, 2017 08:01
Show Gist options
  • Save tobiasvogel/9dd5f1d40ba2933477ce61dcb071acd3 to your computer and use it in GitHub Desktop.
Save tobiasvogel/9dd5f1d40ba2933477ce61dcb071acd3 to your computer and use it in GitHub Desktop.
Brainstorming of Raw Ideas

SVG Icon Resizing Priority Layer

Summary:

Resizing vector-based Icons (especially down-sizing) often results in blurry Icons or "noisy" Icons where higher resolution Details become unrecognizable color-disturbances. Often lower-sized Icons need to be adjusted individually on a pixel-based editing by the Designer in order to make their appearance pixel-perfect. The idea is to implement a single, 8-bit integer colored Layer into SVG Icon files - similar to the concept of Alpha-Layers in png-files - that only use the and elements of the SVG (thus only reference existing elements) that remain hidden and don't get rendered by any arbitrary SVG viewer. The resulting hidden Layer helps deciding which shape elements are key to the Icons appearance and which are less important - e.g. a hairline of a low value on the priority reference-layer can easily be discarded for lower resolutions without rendering the Icon unrecognizable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment