SVG in Google Web Designer

SVG is an XML-based image format used for vector graphics. SVG images can be especially useful in responsive layouts because they can be resized without any loss in quality.

Resizing SVGs

If you're resizing an SVG image or shape to make it larger, use the width and height properties rather than 3D scaling. If you're using the Selection tool transform control to resize the SVG element, you may need to change the sizing method.

How to add SVGs

There are multiple ways to add SVGs to your document:

Import an SVG file (see below for more information)
Use Pen and shape tools to draw an SVG shape
Insert SVG code directly in Code view
Paste SVG code while in Design view
Convert a text element to SVG by applying an SVG filter

Importing SVG files

You can import an SVG file by using the File > Import assets... menu command, or by dragging the file into the Google Web Designer window.

When you import an SVG file, you have a choice between treating the SVG as an image or embedding the SVG code inline within the HTML of the document. The table below lists some of the use cases for each method.

Image	Inline
Usable as an image mask Compatible with focal points Colors can be extracted Listed in the Library	Works with SVG filters Editable in Code view

Note: Some SVG files may not preserve the original aspect ratio and will appear stretched upon import as inline code.

SVG filters

You can add special effects to SVG elements using SVG filters, such blurring, adding a glow, and more. See the full list of SVG filters.

Examples of SVG filter effects (original SVG on the left)

Was this helpful?

How can we improve it?