Info

Info

Quick SVG info page

Preparing your SVG

Two things make an SVG ready for this component: it has to be a single path, and it has to carry no internal transformations. Everything on this page exists to get you there.
Start at the top if you've never opened an SVG in a text editor — it takes a minute and it's often all you need. If your artwork is made of several parts, or came out of a program that baked transformations into it, the sections below cover Inkscape, Affinity Studio and Illustrator, plus a few online tools that flatten a file in one click.
ⓘ Templates are included with the component. Drop your artwork into the one closest to your proportions and export — the ViewBox is already set up for you.

What is an SVG?

The SVG file format, based on XML is a vector file for displaying graphics on websites. Plus, as a vector file, it can be scaled up or down without losing any of its resolution.

SVG features

- SVG can be created and edited with any text editor
- SVG stands for Scalable Vector Graphics.
- SVG defines vector-based graphics in XML format.

- SVG graphics are scalable, and do not lose any quality if they are zoomed or resized.
- SVG is a web-friendly vector file format and is supported by all major browsers.

More info about SVG

Green triangle

In QuickSVG you need to find "ViewBox" values 0 0 210 400 + "Path" content M150 5 L75 200 L225 200 Z

Note: the SVG can be a closed or open shape, if it is open only the strokes thickness will be considered.

SVG required features

Standard SVG Code

Required features

- SVG made of a single path (all its parts in a single group)
- SVG must not contain internal transformations (Matrix)

Not compatible: <g transform="matrix(. . . . . . . . . . . .)">
Sample: <g transform="matrix(0.175398,0,0,0.231235,0,0)">

How to fix Paths and Matrix your SVG?:

If your SVG needs to be edited use a vector drawing program or some online services. Some examples follow.

Demos SVG with Single Path:

How to import the SVG Path

1 - Open the SVG file with a text editor, or any other code editor.

</svg>

2 - In the SVG document you must select only the "Path" content.
Copy ONLY the code (in red) inside ..path d=" M400 32H48C21.5……..20-20 20z"/> quotes excluded!

M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM127 384.5c-5.5 9.6-17.8 12.8-27.3 7.3-9.6-5.5-12.8-17.8-7.3-27.3l14.3-24.7c16.1-4.9 29.3-1.1 39.6 11.4L127 384.5zm138.9-53.9H84c-11 0-20-9-20-20s9-20 20-20h51l65.4-113.2-20.5-35.4c-5.5-9.6-2.2-21.8 7.3-27.3 9.6-5.5 21.8-2.2 27.3 7.3l8.9 15.4 8.9-15.4c5.5-9.6 17.8-12.8 27.3-7.3 9.6 5.5 12.8 17.8 7.3 27.3l-85.8 148.6h62.1c20.2 0 31.5 23.7 22.7 40zm98.1 0h-29l19.6 33.9c5.5 9.6 2.2 21.8-7.3 27.3-9.6 5.5-21.8 2.2-27.3-7.3-32.9-56.9-57.5-99.7-74-128.1-16.7-29-4.8-58 7.1-67.8 13.1 22.7 32.7 56.7 58.9 102h52c11 0 20 9 20 20 0 11.1-9 20-20 20z

3 - In Quick SVG: Paste the code in the Component "SVG Path code"

4 - In SVG: Copy "height" and "width" ViewBox ( or dimensions) values

To display an SVG correctly you need to use the same (or higher) SVG ViewBox values

Dimensions / Viewbox="0 0 448 512"

0 0 = Origin X & Y and 448 = Width & 512 = Height

5 - In Quick SVG: Paste "height" and "width" values into the component panel

6 - In Quick SVG: Preview the SVG in the component. You can also add padding in the desktop and mobile.
Note: With ViewBox values higher than the original ones the size of the SVG decreases, if necessary move the SVG in "ViewBox origin".

How can I edit my SVG?

To edit SVGs you can use one of the programs listed or other online services

Suggested App OpenSource Official guide

Inkscape

Inkscape is a Free and open source vector graphics editor.

Export the SVG in Inkscape

SVG Output panel & Options - More info

SVG Output Options

SVG format in the list

Tip: Use templates provided with the component:
You can use some templates provided for your design. Choose the template with the proportions closest to your SVG. Open the blank template.

Drag the SVG into the template, resize the SVG (edit if needed) and then export the Project to "Optimized SVG"

Editing SVG

How to convert an SVG made of multiple parts into a single path

Open the SVG and select the path. if you want to learn more about path editing tools, visit this page. Paths are edited by dragging their nodes, node handles, or directly dragging a path segment. More info.

SVG with closed Paths

Use "Boolean" Operations. More info

Based on the group of shapes you can join the parts with the option "UNION" or "EXCLUSION" if some parts overlap each other like the example above.

All parts are merged in a single group/path.

SVG with open Paths

Use "Path" tools

Tip: Set the line width to minimum and in pref. leave the "Scale stroke widht option disabled".

Download SVG used in this video: SVG.svg and SVG_READY.svg

Affinity Studio - Graphic design

Affinity Studio / Designer is a professional vector graphics editor for creating logos, icons, illustrations and UI designs.

Export the SVG in Affinity Designer - More info

Flatten transforms

Check Flatten transforms: when selected, this option will remove all internal MATRIX (transformations) and allows the file to be viewed more accurately across browsers.

ViewBox

Check Set ViewBox: when selected, the exported file includes coordinates and dimensions which define the SVG ViewBox. The export area is used to define the view box and you need to provide these values in the Component.

Tip: Use templates provided with the component:
You can use some templates provided for your design. Choose the template with the proportions closest to your SVG. Open the blank template and your SVG. Drag the SVG into the template, resize the SVG (edit if needed) and then export the "Artboard" ( not only the selected SVG in the canvas).