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.
Read more
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.
- SVG is a web-friendly vector file format and is supported by all major browsers.
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)
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.
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 Stack: Paste the code in the stack "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 Stack: Paste "height" and "width" values into the stack panel
6 - In Stack: Preview the SVG in Stacks. 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".
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 stack:
You can use some templates provided for your design. Choose the template with the proportions closest to your SVG. Open the blank template.
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 drag ging 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 Designer
Affinity Designer is a graphic designing and UX solution that helps businesses create concept art, logos, icons, UI designs, among other illustrations.
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 stack.
Tip: Use templates provided with the stack:
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).
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).
Editing SVG
How to convert an SVG made of multiple parts into a single path
SVG with closed Paths
Use "Boolean" Operations. More info
Based on the group of shapes you can join the parts with "ADD" ( union) or"XOR" if some parts overlap each other like the example above.
All parts are merged in a single group/path.
SVG with open Paths
Use "Geometry" tools
Tip: Set the line width to minimum and leave the "Scale with objects" option disabled.
Adobe Illustrator
Adobe Illustrator is a professional vector-based design and drawing program. The software is available with subscription.
Export the SVG in Adobe Illustrator - More info
In the SVG Options window, you can configure the settings for the exported SVG.
Select the "Minify" checkbox in the SVG Options window to reduce the size of the exported file and erase unuseful datas
Select the "Minify" checkbox in the SVG Options window to reduce the size of the exported file and erase unuseful datas
Tip: Use templates provided with the stack:
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 file.
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 file.
Editing SVG
How to convert an SVG made of multiple parts into a single path
SVG with closed Paths
Use "Boolean" Operations. More info
Based on the group of shapes you can join the parts with "ADD" ( union) or "INTERSECT" if some parts overlap each other like the example above.
All parts are merged in a single group/path.
SVG with open Paths
Use "Geometry" tools
Tip: Set the line width to minimum.
NOTE: You can’t join open paths when they are in different layers. So if you want to join multiple lines/paths you must move them into the same layer.
Edit SVG online
How to simplify an SVG and remove Matrix
In SVG MATRIX operations are composed of individual translate, rotate, scale, and skew operations on the SVG canvas. More info
An SVG with a matrix will be probably small in the stack because it inherits the transformations performed in the software that created it.
Some online services to optimize and flatten your SVG files.
An SVG with a matrix will be probably small in the stack because it inherits the transformations performed in the software that created it.
Some online services to optimize and flatten your SVG files.
Download SVG used in this video: SVG_with_matrix.svg and visit LEAN-SVG