.vd.svg

A .vd.svg is an SVG exported from vDesign with the design inside it. GitHub, npm, a mail client and every browser show it as a picture. vDesign, the VS Code extension and the embed open it as the design.

To make one, export as SVG with Keep the design inside (.vd.svg) on. It is one file of the whole document, every page.

Use it where a design should be seen by people who have nothing installed: in a README, an issue, a pull request.

![Home page](designs/home.vd.svg)

What is inside

The .vd file, head and pictures, exactly as a save would write it, in a <metadata> element at the start of the SVG:

<svg xmlns="http://www.w3.org/2000/svg" …>
<metadata><vd:document xmlns:vd="https://getv.design/ns/vd" version="1"><![CDATA[
version 4
kind design
title "Home"
…
]]></vd:document></metadata>
…the drawing…

The design is readable text, so a change to a .vd.svg in a pull request shows the lines of the design that changed. The pictures are in the file twice, once for the drawing and once for the design.

Opening one

• vDesign opens it as a new, untitled document. Saving writes a .vd. To update the .vd.svg, export over it again.
• VS Code opens it in the preview (see VS Code).
• The embed: every function that takes a document takes a .vd.svg too.

An SVG without a design inside it is not a document: parse reports a not-vd problem, and the app says so.

Reading one yourself

The format is open (Licence). Find the vd:document element in the namespace https://getv.design/ns/vd, and join its CDATA sections. A ]]> inside the text is written as ]]]]><![CDATA[>, the standard split. What you get is a .vd file.