SVG

Typography per SVG

InkScape (PortableApps)

Minify SVG file : svgo

npx svgo SOURCE.svg  # Overwrites source
npx svgo SOURCE.svg -o OUT.svg

HTML/CSS

Self closing tags such as path, polygon, etc. do not validate as HTML5; <path ... />

Some modern browsers fix such invalid tags on-the-fly; some don't.

Reading the HTML5 specification, which is the typical IT hellscape of useless verbosity, one would reasonably conclude that self-closing path tags are valid. It explicitly references the "SVG Namespace" tags as "Foreign Elements" and those listed here that don't validate are also "Void Elements". And those are the two categories specified as valid if self-closing. But no, apparently.

We'll have to wait another half-century before IT specs are formatted as key-value pairs, as engineers figured out centuries ago. (Actual engineers, not "IT engineer"s.)

Convert to valid …

<path ...></path>

viewBox : Modify Alignment/Position/Size

tl;dr

Normalize to Zero-offest Viewbox (viewBox="0 0 w h"), assuring dynamic resize without clipping.

Normalize @ Ai …

File > Export > Export for Screens
> Select: All

SVG viewBox attribute sets the render boundary and placement therein.

Adobe Illustrator (Ai) will add/modify it as needed per processing …

While sizing and placement are overridden per CSS, it is useful to scale an SVG to, say, 1000px or more, for fine-grained control/manipulation (coordinates), and so that any subsequent bitmap image rendering (e.g., PNG) will be of high quality. Though Ai also offers scaled bitmap image conversion/export too.

Style per CSS. For image attributes per se (fill, height, width, …) style the "<svg>" element itself; perhaps even inlining the dimensions, if static and otherwise apropos, just to be safe. Conversely, style its container regarding CSS positioning, display, and such box-model properties.

@ viewBox="x-min y-min width height"

Note that viewBox parameters do not change the graphic (size or proportions) itself, but only that (and positioning) relative to the view; to the bounds (box) of the view.

  1. Open in Ai
    • Scale (set its native size; ~ 1000px):
      • Objects > Transform > Scale (% is the only option).
    • Reset viewBox:
      • Objects > Artboards > Fit to Artwork bounds.
    • Export as SVG:
      • File > Export > Export for Screens.
        • If Select: Full Document, then any relative positioning information is lost. It saves as original filename, or as "Untitled-1.svg" if new.
        • If Select: All, then positioning and size relative to viewBox is preserved and normalized. It saves as "Artboard 1.svg".
        • At this point in the process, either selection is okay since we just reset the viewBox, so there is no relative positioning information to preserve.
  2. Open in text editor, and manually adjust viewBox parameters to modify the location and size of the graphic relative to the view box, adjust width and height. Adjust the offsets (x-min, y-min) to re-center it.
    • E.g., if the graphic fills the viewbox "0 0 500 500" edge to edge, then "-15 -15 530 530" inserts 15px of emptiness around it, keeping it centered.
    • Do not modify the Artboard (@ Ai) after doing so, else (all changes to) relative positioning will be lost.
  3. Open in Ai, and again save:
    • File > Export > Export for Screens > Select: All. (Not Full Document.)
    • Saving the Artboard in this manner is a powerful option/tool in that it normalizes all paths such that viewBox offsets are reset to zero, while preserving relative scale(s) and position(s) of all object(s) within the viewBox.
  4. Delete all cruft from the SVG file. It's okay to delete grouping elements (g), and the id and class attributes/values too.

SVG-Font Glyph to SVG

SVG-font glyphs do not render in browsers if used directly in an HTML svg element. They must first be converted from glyph to path, and then normalized, all per SVG specs:

  1. Manually, or by script, map the SVG-font glyph to path, which is as simple as stripping out everything but for the d=... element, and swapping tags; "<glyph>" to "<path>". The "d=..." values-string is preserved (unchanged). See the example below.
  2. Crop @ Ai:
    • Object > Artboards > Fit to Artwork Bounds
  3. Transform @ Ai:
    • Object > Transform > Move, Rotate, Scale, …
      • Operates on selected object(s) only; use mouse.
  4. Export @ Ai:
    • File > Export > Export for Screens > Full Document
      • Optionally, additional exports of various (scaled) bitmap image file(s), e.g., PNG, are available here.
  5. Manually normalize by adding transform to path; scale (vertical flip) and translate (to re-center). This is because an SVG-font glyph is upside down relative to an SVG path.
  6. Manually delete unnecessary svg attributes/values (id, title, …).

Example: "웃"

Unicode glyph 'HANGUL SYLLABLE US' (U+C6C3) is plucked from Malgun Gothic (malgun.ttf), which is a Hangul Symbol font. The TTF is first converted (online) to SVG font (glyph), and then (per Ai) to SVG (path).

@ SVG font (glyph)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <glyph
         glyph-name="uniC6C3"
         unicode="웃"
         vert-adv-y="2176"
         d="M1024 1063q-298 0 -456 92.5t-158 ... -295.5t475.5 -158.5z" />
</svg>

@ SVG (path)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 1500">
    <path 
        d="M1024 1063q-298 0 -456 92.5t-158 ... -295.5t475.5 -158.5z" />
</svg>

@ Transformed SVG (path), after cropped to artboard and exported per Ai.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1790 1886">
    <path 
        transform="scale(1, -1) translate(0, -1886)" 
        d="M895,1200q-298,0-456... ,206.5-295.5T1651,127Z"/>
</svg>

PNG to SVG

@ Adobe Illustrator (Ai)

Unicode Glyph per SVG file

✕ | ☰

@ fileformat.info

@ Adobe Illustrator (Ai)

Note on save as Select: Full Document vs Select: All; the latter (All) preserves positioning information relative to viewBox, and saves as Artboard 1.svg.

@ Text Editor, open the SVG file:

Original

<svg 
    id="Layer_1" 
    data-name="Layer 1" 
    xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 220 185.1"
>
    <defs>
        <style>
            .cls-1{stroke:#000;}
        </style>
    </defs>
    <title>FNAME</title>
    <path class="cls-1" d="..."/>
</svg>

Final

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 185.1">
    <path d="..."/>
</svg>

@ HTML

@ CSS

Add Dropshadow (properly)

A common method for adding dropshadow to an SVG graphic is by embedding a graphics file of the desired effect, and applying it as an overlay. However, the resulting SVG file is huge (100x).

Instead, embed CSS in the SVG to add the effect
as just another vector-graphics object:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style>
        .dropshadow-1 {
            filter: drop-shadow(7px 7px 6px rgb(0 0 0 / 0.3));
        }
        </style>
    </defs>
    <g class="dropshadow-1">
         ...
    </g>
</svg>