logoredraws.com

How to Create an SVG File from Path Data

Turn a raw SVG path string into a working SVG file: wrap it in an svg element, set a correct viewBox, save it, and check that it is ready for favicon or logo use.

Published

Contents
  1. What path data is
  2. Step-by-step: from path string to SVG file
  3. Setting the viewBox correctly
  4. Verifying the result
  5. Using the SVG as a favicon
  6. Caveats before using the artwork
  7. Evidence gaps

To create an SVG from path data, place the path string inside the d attribute of a path element. Wrap that element in an svg root element that declares the SVG namespace and a viewBox matching the coordinates the path uses. Then save the text as a UTF-8 file with the .svg extension. The path data already holds all the geometry. The svg wrapper tells a browser or editor how large the drawing area is and how to read the markup.

What path data is

Path data is the string of drawing commands stored in the d attribute of an SVG path element. Each command is a letter followed by coordinates. Uppercase letters use absolute positions, measured from the origin of the coordinate system. Lowercase letters use relative positions, measured from the current point. Path data alone is not a file. It is one fragment of SVG markup, and it needs a container before anything can display it.

Command | Meaning
M / m | Move to a point without drawing (starts a new subpath)
L / l | Draw a straight line to a point
H / h | Draw a horizontal line
V / v | Draw a vertical line
C / c | Cubic Bézier curve with two control points
S / s | Smooth cubic Bézier, reflecting the previous control point
Q / q | Quadratic Bézier curve with one control point
T / t | Smooth quadratic Bézier
A / a | Elliptical arc
Z / z | Close the current subpath back to its start

Two more terms matter here. The viewBox is the rectangle of user coordinates the SVG shows, written as minimum x, minimum y, width and height. The fill rule decides which areas count as inside a shape when subpaths overlap or nest. It is what makes holes in letterforms and logo marks render correctly.

Step-by-step: from path string to SVG file

  • 1. Copy the complete d value, from the first M command to the last character. Do not copy surrounding quotes or attribute names.
  • 2. Find the coordinate range the path covers. You need this to set the viewBox. Step 3 shows how to measure it.
  • 3. Write an svg root element with the namespace attribute and a viewBox that covers that range.
  • 4. Add a path element inside it, with your string in the d attribute and a fill color.
  • 5. Save the text in a plain-text editor as UTF-8 with the .svg extension.
  • 6. Check the result using the steps in the verification section below.

Here is a minimal example. The path is a simple invented mark: a square outline with a square hole. Replace it with your own data. The xmlns attribute must contain the official SVG namespace identifier published in the W3C SVG specification. It appears as a placeholder here because this article does not reproduce addresses. Vector editors insert the correct value automatically when they export SVG. If you write the file by hand, copy the identifier from the specification or from any SVG your editor exports.

<svg xmlns="SVG_NAMESPACE_IDENTIFIER" viewBox="0 0 32 32">
  <path fill="#1a1a1a" d="M4 4 H28 V28 H4 Z M10 10 V22 H22 V10 Z"/>
</svg>

Without the namespace declaration, a standalone SVG file may not display when it is loaded as an image, such as a favicon or an image tag. The same markup pasted inline into an HTML page often renders even without it, which can hide the problem during testing.

Setting the viewBox correctly

If the viewBox does not match the path coordinates, the artwork may be cropped, shifted off-canvas or shrunk into a corner. You can measure the real bounds of a path in a browser. Paste the markup inline into an HTML page, open the developer console, and run the command below. It returns the x, y, width and height of the geometry in the path's own coordinate system.

document.querySelector('path').getBBox()

Use those four numbers as the viewBox values. Add a little padding if you want space around the mark. For a favicon, use a square viewBox, with equal width and height, so the icon is not distorted or letterboxed when it is displayed in a square slot. If the path is wider than it is tall, center it inside a square viewBox rather than stretching the geometry.

Verifying the result

  • Open the file directly in a web browser. You should see the full shape, with nothing cropped.
  • Open it in a vector editor and confirm the path is selectable as a single editable shape, not an embedded image.
  • Check counters and holes, such as the inside of an O or a ring. If they appear filled in, see the fill-rule note below.
  • Compare the shape with the original artwork. Missing parts usually mean the d string was truncated when you copied it.
  • View the icon at a very small size to judge whether the shape still reads clearly as a favicon.

If holes render as solid areas, the subpaths probably run in the same direction while the default nonzero fill rule is in effect. You have two fixes. You can add fill-rule="evenodd" to the path element, which treats alternating nested areas as holes whatever their direction. Or you can reverse the direction of the inner subpath in a vector editor. In the example above, the outer square and the inner square run in opposite directions, so the hole renders under either rule.

If you extracted the path from a larger SVG, look for transform attributes on the original path or on its parent group elements. A path copied without its transform can appear moved, scaled or flipped. To fix this, either copy the transform onto the new svg as well, or apply the transform to the path in a vector editor so the coordinates are rewritten before you extract them.

Using the SVG as a favicon

To reference the file as a favicon, add a link element to the page head. Set rel to icon, type to image/svg+xml, and href to the location of your file.

<link rel="icon" type="image/svg+xml" href="PATH_TO_YOUR_FILE.svg">

Because an SVG favicon is markup, it can contain a style block that changes color for dark interfaces. The prefers-color-scheme media query does this. It lets a dark logo switch to a light fill when the user's system uses a dark theme.

<svg xmlns="SVG_NAMESPACE_IDENTIFIER" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
  </style>
  <path d="M4 4 H28 V28 H4 Z M10 10 V22 H22 V10 Z"/>
</svg>

Support for SVG favicons and for media queries inside them varies between browsers and platforms. Many sites also supply a raster fallback, such as an ICO or PNG file. This article does not provide a current compatibility table or required fallback sizes. Check current browser documentation before deciding which formats to ship.

Caveats before using the artwork

A .svg extension does not prove a file contains only vector geometry. SVG files can embed raster images, and checking in a vector editor is the reliable way to confirm the contents. Having a logo's path data also gives you no right to reuse that logo. Confirm that you own the mark or have permission from its owner before you publish it as a favicon or in any other delivery.

Evidence gaps

No subject-specific evidence was supplied for this guide. It contains no confirmed specifications, browser support data, recommended favicon dimensions or tool comparisons. Everything above rests on general SVG principles. The example path and colors are illustrative and not taken from any real logo. The SVG namespace identifier is shown as a placeholder and must be taken from the SVG specification or a correctly exported file.