PrettifyPrettify
DocsHome

Docs / Formats

SVG

Last updated:

Prettify draws an SVG file as an image, in an Image view, and shows its source in a Raw view. The Image view, the Raw view, and Download are free. SVG Side by Side and SVG Tools are Pro features.

This page is for anyone who opens SVG files: icons from a design tool, logos, and illustrations that go into a web page or a React project.

Open an SVG

Open a .svg file, drop it on the editor, or paste SVG text at /app/editor. A file with the .svg extension is always SVG. Prettify also detects SVG when the first element of the text is svg. A BOM, an XML declaration, comments, and a <!DOCTYPE svg> can come before it.

SVG is its own format. It is not XML. To read an SVG as XML, select Open as XML. See Open as XML. You can also pick XML in the format list. Prettify then shows an empty XML tab. Paste the SVG text into that tab.

Prettify does not change your text when you open it. Copy and Download write the exact source.

Views

The view switcher offers three views for SVG.

  • Image: the SVG, drawn as an image. This is the first view.
  • Raw: the SVG source as plain text.
  • Both: the source and the image side by side (Pro).

The Image view is safe

The Image view draws the SVG as an image. A browser does not run scripts in an image, and it does not load files from outside the SVG.

  • Scripts never run, and onload and other event attributes do nothing.
  • The SVG makes no network requests.
  • When the SVG refers to an external image, a notice says: "External images in this SVG do not load in the preview."

If the SVG is not valid, the view shows "This SVG cannot be drawn." It also shows the reason and the line of the error. The zoom readout shows "Off", and the badge is hidden. Select Switch to Raw to fix the source. In Both, the source is already beside the image.

The toolbar and the canvas

The toolbar is free.

  • Zoom out, zoom in, and Fit. The range is 10% to 3200%. Fit is the first setting. Hold Ctrl (Cmd on a Mac) and turn the mouse wheel to zoom around the pointer. The zoom buttons and the + and - keys zoom around the center of the visible area.
  • Pan: drag the image when it is larger than the canvas.
  • Background: checkerboard, white, or dark. Use a dark background to check a light icon.
  • Sizes: show or hide the size strip.

A thin dashed line on the canvas shows the edge of the image.

Keys

Select the canvas, then press a key.

  • + or =: zoom in.
  • -: zoom out.
  • 0: Fit.
  • 1: show the image at 100%.

An SVG with no width, height, or viewBox fits in a box of 512 by 512 px.

The badge

The badge is in the toolbar. It shows the viewBox, the size of the SVG text, and the number of elements that have an id. For example: "viewBox 0 0 64 64 · 2.1 KB · 7 ids". Point at a part to see what it means.

Notices

  • No viewBox: "This SVG has no viewBox, so it does not scale. Small sizes show a crop." Add a viewBox to the root element to fix this.
  • currentColor: "This SVG uses currentColor. It is drawn white on dark." On a dark background, and on the dark tiles, Prettify draws the image with a white text color. Your document does not change.

The size strip

The size strip shows the SVG at 16, 24, and 32 px. Each size shows on a light tile and on a dark tile. Use it to check that an icon is still clear at small sizes.

In a view narrower than 672 px, such as a phone, the strip is off at first, so that the canvas has room. Select Sizes to show it. This choice does not change the choice you saved for wide views.

Command palette

When an SVG is open, the command palette (Cmd+K on a Mac, Ctrl+K on other systems) has these entries.

  • SVG: Open tools
  • SVG: Show icon sizes (or SVG: Hide icon sizes)
  • SVG: Checkerboard background
  • SVG: White background
  • SVG: Dark background
  • Open as XML

If another view is open, an entry that acts on the image first switches to the Image view.

Open as XML

Open as XML puts the SVG text in a new tab with the XML format. The SVG tab stays as it is. Use the XML tab for the Tree view and for XPath queries. The action is in the toolbar menu and in the command palette. It shows only for SVG documents.

Settings

Open Settings and find SVG images. Set the default background and whether the size strip shows. The toolbar changes the same two choices. The choice stays on your device.

SVG Tools (Pro)

Select Tools in the toolbar to open the SVG Tools panel. The panel does three steps, in order. It shows the result of each step at once. It never changes the document until you select Apply to document. SVG Tools has one free try per day.

  1. Optimize: svgo makes the SVG smaller. The panel shows the size saved. Optimize also removes <script> elements, on* event attributes, and javascript: links. If the SVG has any of these, the panel tells you.
  2. Unique IDs: Prettify adds a prefix to every id, every url(#...), every href="#...", and every class name. The default prefix comes from the file name. For example, my-icon.svg gives my_icon_. You can edit the prefix. If it does not end with _ or -, Prettify adds _. SMIL animation timing references, such as begin="a.end", stay valid. So do aria-labelledby and aria-describedby, and Optimize keeps role="img".
  3. React component: Prettify writes the SVG as a component. You can edit the component name.

While the panel is open, an Original / Result switch in the toolbar draws the original or the result. Use it to check that the result looks the same as the original.

Next to the switch, a status says "Same drawing" or "Changed". Prettify draws the original and the result at the same size and compares the pixels. A small difference in color or edge does not count. The status shows a moment after you stop typing. If the browser cannot compare the two drawings, no status shows.

In a view narrower than 672 px, the panel opens as a sheet over the bottom of the canvas. The sheet is at most half as high as the view, so the canvas stays visible. Select Close or press Esc to close it. Focus moves into the sheet when it opens, and returns to the Tools button when it closes.

Below the steps, the SVG and React tabs show the text that Copy SVG and Copy React copy. In a wide window, drag the divider to make the panel wider or narrower. Prettify keeps the width on your device.

The panel has three buttons.

  • Copy SVG: copies the result as SVG text.
  • Copy React: copies the component.
  • Apply to document: replaces the document with the result and adds one version to History. A notice with an Undo button shows for a few seconds. Select Undo to restore the text from before Apply. After Apply, the button shows Applied until the document changes. A free user keeps only the latest History version, so Undo in the notice is the way back.

The SVG tab shows the result with indents so that it is easy to read. Copy SVG copies the same text without the added indents.

For an SVG over 512 KB, the panel runs the steps only when you select Run.

The panel keeps your prefix, component name, Optimize and Unique IDs choices, and the selected tab for each document. They stay when you switch to another tab and back. Prettify keeps them for the session only, for up to 30 minutes after the last use, and does not save them to your device.

If you do not have Pro, the panel shows a preview with the number of bytes that Optimize can save, for example "This SVG can be 48% smaller with SVG Tools." It shows the number only when Optimize saves at least 1%.

The React component

The component is an arrow function with the type React.FC<React.SVGProps<SVGSVGElement>>. Thus it accepts every SVG prop, such as width or className. It has export default.

const CloudRain: React.FC<React.SVGProps<SVGSVGElement>> = (
  props: React.SVGProps<SVGSVGElement>
): React.ReactElement => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" {...props}>
    <path d="M8 40h48" />
  </svg>
);

export default CloudRain;

The component name comes from the file name. cloud-rain.svg gives CloudRain. When there is no file name, the name is Icon.

The component keeps only known SVG elements and attributes. Prettify drops these:

  • <script> and other elements it does not know
  • event attributes such as onclick
  • javascript: links and links with other unsafe schemes

Links and image URLs keep only #fragment references, relative URLs, and http and https URLs. A data:image/ URL stays only on an image element.

CSS keeps only url(#...). This applies to a style attribute, to a presentation attribute such as fill, and to a <style> element. A style attribute on an image element can also keep url(data:image/...).

Limits

A <style> element in an inline SVG applies to the whole page, and ids can clash. Two icons on one page can use the same id. Unique IDs is on by default. It adds a prefix to ids and class names to limit both problems.

CSS nesting and media range syntax in a <style> element are dropped from the React output.

Side by side (Pro)

Both shows the source and the image next to each other. The image updates after you stop typing for a short time.

Both is a Pro feature named SVG Side by Side. Free users get one try per day. See Pro for the full list.

Large files

SVG documents over 5 MB open and edit as normal. Prettify does not save History versions for them, as with HTML. A notice says: "This file is too large to keep in History."

For an SVG of 1 MB or more, Prettify checks the syntax after you stop typing for half a second, when the browser is idle. The Problems list can be a moment behind the text.

Download

Download saves the document as a .svg file. Copy and Download write the exact source.

  • HTML covers the other document format with a safe preview.
  • XML covers other XML documents, such as feeds and config files.
  • Desktop app covers opening SVG files from Finder or from your editor.