Clean, readable SVG output
No editor addressing, no wrapper groups the drawing does not need. data-shape-id, the identifier the editor uses internally to find an element again, is stripped at every boundary that leaves the editor, including Copy as Code, so the markup is what you would write by hand and is safe to commit.
What does survive is the document itself. <title> and <desc> are the SVG's accessible name and description and are always written; <metadata> and any <link> / <meta> the source file carried are preserved so an imported file round-trips instead of being quietly stripped. They are written while the "Include metadata" checkbox in the SVG export options is checked, and only then does SVGSketch write its own namespace: the svgsketch:corners attribute that keeps shaped path corners editable when the file is reopened in SVGSketch, the marker on the metadata description that holds the document fields you set, and the svgsketch:custom element that holds an additional field named without a recognized metadata prefix. Clear the checkbox when you want the leanest possible file. Precision is yours too - a per-export decimal setting on top of the document's own coordinate precision.
Export as framework code
Generate copy-paste-ready React JSX with camelCase props, Vue single-file components, data-driven D3.js, or CSS rules, all from the same document, via Edit > Copy as Code. The SVG format is free; React, Vue, D3.js and CSS are Pro.
Bind colors and other properties to variables
Fills, strokes and other fields can be bound to document variables rather than literals, so the exported file carries fill="var(--brand)" and a <style> block declaring the token. One edit retints everything bound to it, and a consuming page can override the token without touching the artwork.
For renderers that do not apply CSS - rasterizers, icon pipelines, older viewers - "Maximum SVG compatibility" emits a literal presentation attribute alongside the variable reference, with a class rule that outranks it wherever CSS is applied. Per SVG 2 §6.4 the presentation attribute is the lowest-specificity layer of the cascade, so both consumers get the answer they can use.
Treat SVG designs like source code
Save editable work as deterministic .svgs JSON so icon and illustration changes can move through pull requests like the rest of your codebase. Color, geometry, template variables, and metadata changes are reviewable instead of hidden inside binary design files.
Because .svgs files are text, teams can version them, review diffs, branch experiments, and keep source artwork beside the components or docs that consume it.
Render SVG from the terminal and in CI
The @svgsketch/cli package runs the same core the editor runs. svgsketch render turns a .svgs source into production SVG, svgsketch convert writes SVG from an .svg, .ai, .eps or .pdf file, svgsketch validate checks a document and svgsketch info reports on one, svgsketch vars sets template variables, and svgsketch codegen writes React, Vue, D3.js or CSS from the same source. The SVGSketch render GitHub Action wraps the renderer for a workflow, so a pull request that changes an .svgs file ships its rendered assets with it.
Template variables let one design generate many variants: status badges, themed icons, product diagrams, social images, and brand-color sets can all come from the same source.
Manipulate SVG with the SDK
The TypeScript SDK in @svgsketch/core is the document model, renderer and code generator the editor is built on, published on their own. createDocument and createShape build a document as plain data, renderToSvg writes it as SVG, generateCode writes it as React, Vue, D3.js or CSS, and the same functions open an .svgs file, change a fill or a path, and write it back. The card above runs that code: the markup it shows is what the call returned.
Keyboard shortcuts and the XML Inspector
Use keyboard shortcuts for tools and panels, copy SVG markup with Edit > Copy as Code > SVG (Ctrl+Shift+C), and drag files onto the canvas to import them. Plugins extend the editor, while the CLI and TypeScript SDK provide validation, rendering, and document creation from code.