{"route":"/en-US-v0.14.1/reference/svg/","title":"SVG","description":"Documentation for functions related to SVG in Typst.","part":null,"outline":[{"id":"summary","name":"Summary","children":[]},{"id":"exporting-as-svg","name":"Exporting as SVG","children":[{"id":"command-line","name":"Command Line","children":[]},{"id":"web-app","name":"Web App","children":[]}]}],"body":{"kind":"category","content":{"name":"svg","title":"SVG","details":"

Instead of creating a PDF, Typst can also directly render pages to scalable\nvector graphics (SVGs), which are the preferred format for embedding vector\ngraphics in web pages. Like PDF files, SVGs display your document exactly how\nyou have laid it out in Typst. Likewise, they share the benefit of not being\nbound to a specific resolution. Hence, you can print or view SVG files on any\ndevice without incurring a loss of quality. (Note that font printing quality may\nbe better with a PDF.) In contrast to a PDF, an SVG cannot contain multiple\npages. When exporting a multi-page document, Typst will emit multiple SVGs.

\n

SVGs can represent text in two ways: By embedding the text itself and rendering\nit with the fonts available on the viewer's computer or by embedding the shapes\nof each glyph in the font used to create the document. To ensure that the SVG\nfile looks the same across all devices it is viewed on, Typst chooses the latter\nmethod. This means that the text in the SVG cannot be extracted automatically,\nfor example by copy/paste or a screen reader. If you need the text to be\naccessible, export a PDF or HTML file instead.

\n

SVGs can have transparent backgrounds. By default, Typst will output an SVG with\nan opaque white background. You can make the background transparent using\n#set page(fill: none). Learn more on the\npage function's reference page.

\n

Exporting as SVG

\n

Command Line

\n

Pass --format svg to the compile or watch subcommand or provide an output\nfile name that ends with .svg.

\n

If your document has more than one page, Typst will create multiple image files.\nThe output file name must then be a template string containing at least one of

\n\n

When exporting to SVG, you have the following configuration options:

\n\n

Web App

\n

Click "File" > "Export as" > "SVG" or click the downwards-facing arrow next to\nthe quick download button and select "Export as SVG". When exporting to SVG, you\nhave the following configuration options:

\n","items":[],"shorthands":null}}}