svg

SVG Creation Guide

Create clean, scalable SVG that is easy to edit, prints well, and survives “real-world” tooling (PowerPoint, browser, PDF export, HMI toolchains).

Working rules (keep SVG dependable)

Use a viewBox on every SVG.
Keep geometry simple: prefer path , rect , circle , line , polyline , polygon .
Prefer strokes for technical drawings; prefer fills for pictograms.
Use consistent naming and grouping: id on key groups, class for reusable styling.
Avoid renderer-fragile features unless asked:
Avoid: filter , mask , clipPath , foreignObject , blend modes, external images/fonts.
Use gradients sparingly; keep them simple (linearGradient /radialGradient ).
Keep decimal precision reasonable (typically 2–3 decimals). Do not over-optimize readability away.

Requirements to capture (ask only what matters)

Capture enough to produce the correct output on the first pass.

Target environment (drives compatibility)

Web / inline HTML
PowerPoint / Office
HMI/SCADA tool (name/version if known)
Engineering doc pipeline (PDF export, Visio, etc.)

Canvas + scale

Desired physical size (mm/in) or slide size intent
Coordinate system preference (e.g., “0–100 grid”, “millimeters”, “pixels”)
Any snapping/grid requirements

Useful conversions (SVG assumes 96 DPI for CSS pixels):

$1,\text{in} = 96,\text{px}$
$1,\text{mm} = 96/25.4 \approx 3.7795,\text{px}$

Styling constraints

Stroke widths (e.g., 1.5 for primary lines, 1.0 for secondary)
Line caps/joins (round vs square)
Color palette (include corporate colors if relevant)
Light/dark background expectations

Content + semantics

What objects exist (symbols, instruments, pipes, arrows, labels)
Layering needs (background, pipework, instrumentation, callouts)
Text rules (font family, size, casing, alignment)

Deliverables

Number of variants (size/layout/color)
Editable text vs outlined text requirements
File naming convention and destination folder

Output patterns (choose the right one)

Pattern A: Technical diagram / P&ID style

Use strokes, consistent line weights, and a simple palette. Prefer vector-effect="non-scaling-stroke" when objects will be scaled.

Key tips:

Keep symbols as <g id="symbol-*"> groups.
Use stroke="currentColor" on symbols when you want themeable line art.
Align to a grid; keep elbows crisp with polyline .

Pattern B: PowerPoint/Office-friendly illustration

Prioritize compatibility:

Prefer inline presentation attributes (fill , stroke , stroke-width ) over heavy CSS.
Avoid: masks/filters, complex gradients, marker arrows (Office support varies).
Keep text as <text> if the user wants to edit labels in PPT.
If the user needs pixel-perfect portability, provide an “outlined” version (text converted to paths) and warn it is no longer editable.

Pattern C: HMI/SCADA widget

Design for clarity at small sizes and for interaction:

Use generous hit areas (transparent rect with fill="transparent" for click/touch zones).
Keep state styling isolated (.state-ok , .state-alarm , .state-disabled ).
Separate “skin” from “labels” so integrators can map tags and states.

SVG skeleton (recommended)

Use this as the default structure.

<defs> <style> .line { fill: none; stroke: #111827; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .thin { stroke-width: 1; } .fill { fill: #F3F4F6; } .text { fill: #111827; font-family: Arial, sans-serif; font-size: 12px; } </style> </defs>

If targeting PowerPoint/Office and compatibility is uncertain, repeat critical attributes inline on elements (Office can be picky about CSS).

Reference examples (copy/paste building blocks)

P&ID-style pipe with arrow and tag

Simple valve symbol (line-art)

HMI button (states via classes)

<g id="button" class="ok"> <rect class="btn ok" x="10" y="10" width="200" height="50" /> <text class="label" x="110" y="42" text-anchor="middle" dominant-baseline="middle">START</text>  <rect x="10" y="10" width="200" height="50" fill="transparent" /> </g> </svg>

Quality checklist (run mentally before delivering)

Include viewBox ; ensure shapes fit the viewBox with sane margins.
Keep stroke widths consistent and intentional.
Ensure text alignment is correct (text-anchor , dominant-baseline ).
Keep groups layered predictably (layer-* ).
Avoid external dependencies (no linked fonts/images) unless requested.
If PowerPoint/Office is the target, avoid unsupported features and prefer inline attributes.

File outputs

When saving multiple variants, use a naming convention that encodes intent:

asset-name__v1__editable.svg
asset-name__v1__outlined.svg
asset-name__dark.svg
asset-name__light.svg
asset-name__scale-0-100.svg

Save files into a logical folder (e.g., assets/svg/ or a user-specified directory).

Safety Notice

Copy this and send it to your AI assistant to learn

Source Transparency

Related Skills

frontend-design

algorithmic-art

skill-creator