HISE > Tools > Show SVG to Path Converter

Base64 Path

• What it is: Just the geometry - the raw path outline. HISE parses the SVG's path data, serializes it as JUCE binary path data (Path::writePathToStream), and Base64-encodes that. No compression.
• What it drops: All styling. Colours, fills, strokes, gradients, multiple shapes - gone. You get single monochrome outline.
• Best for: UI icons and shapes you want to recolour yourself, LAF buttons, anytime you control the fill. Smaller and simpler.
• How you use it:

const var iconData = "....";        // pasted output
var p = Content.createPath();
p.loadFromData(iconData);
// in a paint routine:
g.fillPath(p, area);                // you pick the colour

Base64 SVG

• What it is: The entire SVG document (the XML text) ZSTD-compressed, then Base64-encoded.
• What it drops: Nothing. It preserves everything - multiple paths, fill/stroke colours, gradients, groups, transforms.
• Best for: Multi-colour logos, splash graphics, pre-designed artwork you want rendered exactly as drawn.
• How you use it:

const var svgData = "....";         // pasted output
var svg = Content.createSVG(svgData);
// in a paint routine:
g.drawSVG(svg, area, 1.0);          // renders with its own colours/styling

Which to choose

  ┌───────────────────────────┬───────────────────────────────────┬────────────────────────────────────┐
  │                           │            Base64 Path            │             Base64 SVG             │
  ├───────────────────────────┼───────────────────────────────────┼────────────────────────────────────┤
  │ Preserves colours/styling │ No                                │ Yes                                │
  ├───────────────────────────┼───────────────────────────────────┼────────────────────────────────────┤
  │ Multiple shapes/groups    │ Flattened to one outline          │ Kept intact                        │
  ├───────────────────────────┼───────────────────────────────────┼────────────────────────────────────┤
  │ You recolour it in script │ Yes (you must)                    │ No (uses embedded colours)         │
  ├───────────────────────────┼───────────────────────────────────┼────────────────────────────────────┤
  │ Size                      │ Smaller, uncompressed             │ Larger source, but ZSTD-compressed │
  ├───────────────────────────┼───────────────────────────────────┼────────────────────────────────────┤
  │ Loads via                 │ Content.createPath + loadFromData │ Content.createSVG + g.drawSVG      │
  └───────────────────────────┴───────────────────────────────────┴────────────────────────────────────┘

Rule of thumb: if it's a single-colour icon you want to tint from the script (e.g. active/inactive states), use Base64 Path. If it's a designed, multi-colour graphic that should look exactly like the artwork, use Base64 SVG.