Hi, my name is Kent
I'm the creative specialist on the Google Web Designer team
and I'd like to show how to use SVG filters in Google Web Designer
I can import SVG files a few different ways
File > Import assets... or simply drag one onto the stage
When importing SVG elements you'll need to choose one of two options: IMAGE or INLINE
The default value Import as Image treats it like any other image like your regular JPG or PNG
With the transform control I can resize and see the image scales proportionally to fit the container
Scaling and Alignment are built into SVG files
and not affected by those controls in the Properties panel
That's the usual behavior of SVG images
although it can vary depending on the file
some files will stretch and others not resize at all
that's all part of the SVG code
The other option for importing, Inline SVG, is completely different
and provides total control plus enables SVG filters
For example now that same file stretches as I resize it
Notice the element is identified by SVG in the layers panel
there are no image controls in the Properties panel
and the element won't be listed in the Library
This file here is the one I imported as an image
so if you wanted a copy of the inline-SVG version
you would copy and paste it on the stage
when you inline SVGs the code is written directly into the document
and the thing I like about that is that now you can change it
simple things like scaling and color for example
or more complex like directly animating SVG elements in Code view
With the element selected I'll switch to Code view
and see the SVG tag highlighted
Be aware that a fair amount of rewriting may occur with your SVG code for security and optimization
I could change that stretching behavior here by deleting this attribute
then scan for a color and change it
Back in Design view I see both changes in effect
and that's something you can't do when importing as an image
But the main power of inlining SVGs is access to SVG Filters
however I want to mention the final way to import SVGs is by selecting the code from the editor
and pasting onto the stage which automatically inlines the files
skipping the option to import as an image
And one tip regardless of how you import your files is
if you ever need to increase the size like blow it up two or three times larger
then do that with Width & Height instead of Scale
because that'll keep your SVGs looking sharp like the vector art you're expecting
Now here's the Filter part...
any inline SVG has this option when you right-click: Add SVG filter...
and now you have all these choices
like Bevel... and Dissolve...
and some are pretty crazy like Splash
and you can tune these to get some cool effects
I'll just use Aura and change the color
I'll also point out only one SVG filter can be applied to an element
and unfortunately they can't be animated
Now I'll take that other file, Add SVG filter...
and at the bottom of my list are all the previously applied filters
so I can choose the same one
And I could change the color
Save and see all instances of that filter were updated
And if I want to make one different I now have an Edit SVG filter... option
and I can just reapply a fresh filter from the menu
These SVG filters also work with Shapes
elements created with this Tool: Pen, Oval, and Line but not Rectangle
for that you could just draw a rectangle with the Pen tool
For example I'll use the Line tool
increase the weight
and add a filter
Textured
Lime Green
And you can get some cool stylized effects this way
Now I'll use the Pen tool
and apply that same filter
Save, increase the stroke weight to see the effect
and now you can still edit the path even when the filter is on it
These SVG filters can also be applied to text elements
but there are some limitations
For one, Text-fitting is not supported once you apply a filter
When an SVG filter is added, the text is converted to an SVG
and I won't be able to edit it with the Text tool at least until I remove the filter
So, confirm here and I can still edit the content, size & color but now only in this dialog
and your text is limited to one single line
then apply a filter
Drop Shadow
and I can unlink these directions to change the angle
and Save
If at some point I want full control over the text again
I can remove the filter to restore text tool editing
for example changing the style
Edit
select none, save, and now the text is returned to normal editing
Dynamic text is also supported, but again, without text-fitting
so you'd probably only use this when you keep close control on your character count
For example, a price
at this size I could tighten the letter-spacing
like -5
The trick here is to make the text dynamic first, before the filter
so I'll right-click, Dynamic bindings...
use Standard, Brand Awareness
and my element is already selected
Text content and I'll use Title
then I can add the filter
accept the conversion
choose one, like Bevel
accept this
And then I'll change my sample data to see the text is dynamic even with this filter applied
In this case a simple price change
One last topic is Responsive text with SVG filters
I can change the text content on different ad sizes to make better use of the available space
In the Responsive panel click this check box to create the responsive file
and I'll scroll down to select a billboard size
then back to "Edit base document" to create the headline with the Text tool
then I'll add an SVG filter, and choose that same one
Now in the Responsive panel, at 300x250 I need to make this smaller
but since text-fitting isn't supported with the SVG filter
Width isn't going to help me so here's where Scale could work because i'm reducing the size
But at this size the filter effect isn't as good because the headline is so small
although it could be bigger with fewer words
so I'll edit the SVG filter
and now I'm overriding the text content for this one size only
and I'll shorten the headline
Now I can increase the size and I'm still below 1.
and when I do a responsive preview
I'll see my text with the SVG filter applied and using different text on these sizes
That's it for SVG filters in Google Web Designer
Thanks for watching!