Import SVG Page

Importing

There are many pieces of design software that allow you to create SVG outlines including Adobe Illustrator, or its open-source equivalent Inkscape. However you create SVG Vector Outlines, you can import them on this page.

This page is for importing individual outlines from code to specific glyphs. Importing whole SVG fonts can be done from the initial Open Project page.

Importing outlines happens one glyph at a time, and could be accomplished like this:

• Select a glyph in the chooser pane on the left. This will be the destination for your imported outlines.
• Specify scaling and moving options. Many times your design software coordinate system setup won't match Glyphr Studio's coordinate system. Enter the specific height metrics for this glyph (Does it go above the x-height line, or below the baseline? Is it a rounded glyph that has overshoot?) then select Scale and Move options. Your glyph outlines will be re-sized and moved to the correct location.
• If your file is a single glyph, you can drag and drop it onto the area specified. Otherwise, copy and paste the SVG code into the code box. The importing will not happen until the Import SVG button is pressed, so you can double-check your code before you proceed.
• Pressing the Import SVG button will parse the SVG code, translate it into Glyphr Studio shapes and paths, and insert it into the specified glyph. There is also a button to jump to the Glyph Edit page for the selected glyph, and a button to clear the code box.

Notes about SVG

SVG is a huge language that is capable of defining a much larger set of graphic design concepts than are needed for font glyph design. As a result, Glyphr Studio ignores much of the SVG code that gets imported.

What Glyphr Studio imports:

• Outline data from the following tags: path, rect, polygon, polyline, circle, and ellipse.
• The following commands from the 'd' attribute in the path tag: Move To (Mm), Line To (Ll), Horizontal Line To (Hh), Vertical Line To (Vv), Bezier Line To (Cc), Smooth Bezier Line To (Ss), Quadratic Bezier Line To (Qq), Smooth Quadratic Bezier Line To (Tt) Close Path (Zz).

What Glyphr Studio ignores:

• The 'line' tag. And, basically any tag not mentioned in the previous section.
• All stroke attributes, like stroke-width. Paths are assumed to be outlines of shapes.
• The Arc To (Aa) path commands in the 'd' attribute
• The 'g' tag, and all its attributes. Any transformations are ignored.
• The 'svg' tag itself. ViewBox, x, y, width, height attributes are all ignored.

Things to keep in mind:

• All lines or paths will be closed by Glyphr Studio. The last point in any path will be connected with the first point.
• Path direction (or 'winding') is not important in SVG, but it is important in glyph design. Winding determines if two overlapping shapes both appear filled, or if one 'cuts out' from the other. This can be toggled in the Shape Attributes Panel with the 'overlap mode' attribute.
• Adobe Illustrator artboards don't get exported to SVG. If you're importing from Illustrator, and not using the Scale option in Glyphr Studio, then imported shapes may end up in a surprising location, like way outside the Em square.
• Some rectangles that have been rotated in Adobe Illustrator export as SVG rectangles with a transform applied (which Glyphr Studio ignores). You can remedy this by right-clicking the rotated rectangle in Illustrator, and selecting "Make Compound Path".