Everything SVGs: Creation, Compression and Embedding

  • 13 August 2021
  • 61 replies
  • 653 views

Userlevel 3
Badge +1

Let’s discuss SVGs.

How are people creating them, compressing them, and placing them in sites? I’ve found creating in Adobe Illustrator, compressing them with SVGO (https://github.com/svg/svgo), and placing in Elementor using the image widget has been nice.

However, I’m wondering if there is a better way to automatically compress SVGs and whether it would be preferable to inline the SVG markup code by pasting it in an HTML widget. However, this makes it harder to size.

Any thoughts, advice, findings?

Bonus: for SVG icons, how do ensure Elementor can change the color of single color SVGs? Strip out the code before uploading? Export the SVG with a black fill? Thoughts?

Thanks!


61 replies

Userlevel 6
Badge +1

Brian, I for one am grateful for this discussion. I’ve been trying, with no luck (so far), to export usable SVG files using Photoshop. So, I’mm be trying the AI and GitHub option… and, like you said, any other suggestions.

Userlevel 7
Badge +4

I use the icon widget for some svgs like logo or other icons I want to color using the widget’s color picker.  For all others I use them as images.

I do find that if I have a template with many svgs, the editor can slow down to a crawl, especially if some of the svgs are more complex.

Userlevel 3
Badge +1

@Simon Latham Let me know how it goes for you. I had trouble with AI initially, but then fiddled with the export settings and now it works consistently. If I remember right, I either turned on or off export as responsive for the svg but can’t remember which!

Userlevel 1
Badge +2

@Brian Erickson , I’m using ImageOptim (Mac) to compress SVG, for online tools, u can use https://vecta.io/nano

EWWW do automatic optimise SVG. But I would avoid it as something it strip out some graphic element.

Userlevel 4
Badge +2

Hey @Simon Latham!

You should use really Illustrator, not Photoshop, for everything vector. Photoshop is really made for raster image processing, which is entirely different from vector images (which SVGs are). Vectors are image made from mathematical curves, whilst raster images are composed of pixels.
I cannot imagine how painful it is to try creating vector graphics through Photoshop, let alone if it’s even possible, so you’re doing the right thing by using Illustrator!

Anything that is icon/logo and some type of illustrations should be made using Illustrator. In the rare case where I have to convert a raster image to vector, I use Illustrator’s vectorization tools and some elbow grease.

Sometimes, if the original image quality isn’t right for vectorization, I try to reproduce the image manually with bezier curves (pen tool) and sometimes downloading the appropriate fonts, then vectorizing the text and matching the colors to the original raster image.

It’s not easy but your websites and image quality will thank you for it! It is definitely worth it.

 

Bonus: Vector icons also preserve maximum quality if one day you want to print them on pamphlets or business cards. =)

Userlevel 4
Badge +2

Bonus: for SVG icons, how do ensure Elementor can change the color of single color SVGs? Strip out the code before uploading? Export the SVG with a black fill? Thoughts?

 

@Brian Erickson Easy for me. I do not use the fill or stroke attribute on my svgs at all. I erase them. Instead, when it comes to setting an icon color, I use CSS (yep! It works just like bum-standard HTML in that regard). 

 

Here is an example of the SVG code of an icon on my latest website:

<svg class="star" viewBox="0 0 100 100" xml:space="preserve">
<path d="M96.7,39.2c-0.4-1.1-1.3-2-2.5-2.1l-28.6-4.2L52.8,7c-0.8-1.5-2.6-2.2-4.2-1.4C48,5.9,47.5,6.4,47.2,7L34.4,32.9L5.8,37.1c-1.7,0.2-2.9,1.8-2.7,3.5c0.1,0.7,0.4,1.3,0.9,1.8l20.7,20.2l-4.9,28.5c-0.3,1.7,0.8,3.3,2.6,3.6c0.7,0.1,1.4,0,2-0.3L50,80.9l25.6,13.5c1.5,0.8,3.4,0.2,4.2-1.3c0.3-0.6,0.4-1.3,0.3-2l-4.9-28.5l20.7-20.2C96.8,41.6,97.1,40.3,96.7,39.2z M69.7,59.3C68.9,60,68.6,61,68.8,62l4.1,23.9L51.5,74.6c-0.9-0.5-2-0.5-2.9,0L27.1,85.9L31.3,62c0.2-1-0.2-2-0.9-2.8L13,42.4l24-3.5c1-0.1,1.9-0.8,2.4-1.7L50,15.5l10.7,21.7c0.5,0.9,1.3,1.6,2.4,1.7l24,3.5L69.7,59.3z">
</path>
</svg>

And I set the CSS as such:

svg.star {
stroke-width: 1.75px;
stroke: currentColor;
}

Notice that CSS attribute value currentColor.
It is special! It allows the icon to inherit whatever color you give to the SVG or SVG’s parent in the HTML. Or of course, you can also set the stroke or fill color to whatever you want using that same CSS, but TL;DR, if you had to leave a fill or stroke attribute in your SVG code, I’d recommend you set it to currentColor.

Userlevel 4
Badge +2

However, I’m wondering if there is a better way to automatically compress SVGs and whether it would be preferable to inline the SVG markup code by pasting it in an HTML widget. However, this makes it harder to size.

@Brian Erickson

 

Ah I’ve been bummed on that and I “compress” my SVGs manually. =^)
I usually take the original code I get from Illustrator when importing an SVG, paste it in a minifier, erase the bits I don’t want then copy-paste that minified code again in the original SVG file using a text editor.

However, you should definitely minify your SVGs. It should save you at least a few kilobits per SVG (likely more), and that makes a good difference if you have a lot of them on your page; it also makes a bigger difference on more complex illustrations.

And after that if you want to really be an optimization freak, you can try to reduce the amount of anchor points on your SVG images with Illustrator, which can sometime make a large difference depending of the quality of the original SVG. But that’s just me. =^)

Userlevel 6
Badge +3

I use this for the colour part within the HTML to set to Global Colours:

Instead of fill="000000”

Use fill="var( --e-global-color-accent)"

Or fill="var( --e-global-color-primary)"

Or fill = fill="var( --e-global-color-secondary)"


<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="365px" height="457px" viewBox="0 0 3650 4570" preserveAspectRatio="xMidYMid meet"><g id="layer1" fill="#000000" stroke="none">

 

Userlevel 3
Badge +1

@Hélène DesaulniersWow, great information! I’m not surprised you’re the one providing it. I hadn’t contemplated the bonus of going to print with SVGs and was unaware of currentColor as well. Thank you!

@Imran Siddiq Great idea with the global CSS variables. Here’s hoping Elementor doesn’t change the naming convention because my sites take full advantage of styling using those variables.

@Julian Song I’ll give ImageOptim a try. Thank you! We do all of our design work in Figma but I’ve had some issues with SVGs exports from Figma. There is some sort of an SVGO plugin for Figma I believe — may try that as well. Up to this point, Illustrator has generally worked the best for me.

Userlevel 4
Badge +1

@Simon LathamLet me know how it goes for you. I had trouble with AI initially, but then fiddled with the export settings and now it works consistently. If I remember right, I either turned on or off export as responsive for the svg but can’t remember which!

I just tested it. As far as I can tell, the primary difference between the two is that if responsive is unchecked, the SVG has an actual intrinsic size, whereas if it is checked it does not.

A responsive SVG will automatically fill the space.

If responsive is checked, it will display at the predetermined size by default. 

You can scale them both the same.

Very unfortunate that SVGs with an intrinsic size never outputs width & height attributes when set to full, as any other image will. I consider this is a bug.

Userlevel 6
Badge +1

Wow! That’s a great deal of really useful information and I now look forward to making use of it. Can’t wait to finish work.

Thank you, @Brian Erickson@Abner Rojas, @Hélène Desaulniers@Imran Siddiq, @Mark Blair and @Julian Song. I’ll report on my success/trials.

Userlevel 3
Badge +1

@Simon Latham Excellent! We’ll be curious to find out how it goes for you. Good luck!

Userlevel 4
Badge +1

Very unfortunate that SVGs with an intrinsic size never outputs width & height attributes when set to full, as any other image will. I consider this is a bug.

@ShayToder brought something to my attention that makes unchecking responsive a great choice in certain circumstances. I’d been struggling with dealing with CLS issues when it comes to SVG logos and how best to set height/width attributes in an Icon widget. He brought to my attention that you can simply add the width & height attributes to the SVG file before posting.

Here is his excellent post, where he addresses this: https://www.shaytoder.com/how-to-improve-cls-cumulative-layout-shift/#anc-dimensionless-images

If you use Illustrator and have your units set to pixels, you can use transform to size your artwork to whatever pixel dimensions you want, then uncheck responsive during the SVG export.

This results in an SVG file that contains the intrinsic values, which is helpful at avoiding layout cumulative layout shift.

I still wish there was a way to natively override this in the widget itself, as it would be better to control it there when using the same SVG on the page in multiple places at different sizes. I do believe that some of the 3rd party addons can do this.

Userlevel 3
Badge +1

@Mark Blair

I still wish there was a way to natively override this in the widget itself, as it would be better to control it there when using the same SVG on the page in multiple places at different sizes. I do believe that some of the 3rd party addons can do this.

Are you saying adding the fixed values prevent the logo being “sizable” in the icon and image widgets? For example, at tablet and mobile sizes? If so, then we may have a usability vs. performance trade-off to consider.

Userlevel 4
Badge +1

Are you saying adding the fixed values prevent the logo being “sizable” in the icon and image widgets? For example, at tablet and mobile sizes? If so, then we may have a usability vs. performance trade-off to consider.

@Brian Erickson Sort of. You can still use an Image widget with it further down the page, but obviously then it won’t be embedded and height/width will not be output to the IMG tag, so you would potentially have CLS from that .

Using the SVG elsewhere with an Icon widget does seem to be a problem as sizing appears to only apply to the box, rather than the artwork itself.

I think it is best to use this approach only when you are going to use that item in a fixed size that nobody is going to be editing (headers & footers, for example). Since it is an embed, it doesn’t matter speedwise if you simply embed an SVG with a different size elsewhere (like the footer) because there is no code savings in the reuse anyway.

It definitely is a less flexible approach from the user’s perspective. I think that Elementor should add a dedicated SVG widget with maximum options to Elementor Pro (choice of outputting as embed or linked, etc). 

 

Userlevel 3
Badge +1

Thanks @Mark Blair. An SVG widget seems like a good idea to me too. It may be confusing to the average user vs. image widget though. However, groups like Webflow are coming for Elementor in the performance aspect so some decisions in favor of auto-optimization are probably smart.

Userlevel 6
Badge +3

Excellent advice above

Userlevel 4
Badge +2

@Mark Blair 

Very unfortunate that SVGs with an intrinsic size never outputs width & height attributes when set to full, as any other image will. I consider this is a bug.

 

I’m curious about what you mean by “set to full”? Maybe I could explain the behavior.

 

He brought to my attention that you can simply add the width & height attributes to the SVG file before posting.

 

Yes by default SVG fills the maximum space since their “size” in width and height is technically infinite. I usually don’t bother setting width/height on my SVG files and set it in the CSS because I might use the icons in different sizes across the site and it allows me to tweak its size on the spot.

Also, as a side note (this one is for you @Brian Erickson), I tend to integrate my vector illustrations as plain text with shortcodes/HTML widget, rather than using the image widget. It makes less requests to the server, the page loads faster and it let me retain maximum control over the SVG colors and animation.

Userlevel 6
Badge +3

“Also, as a side note (this one is for you @Brian Erickson), I tend to integrate my vector illustrations as plain text with shortcodes/HTML widget, rather than using the image widget. It makes less requests to the server, the page loads faster and it let me retain maximum control over the SVG colors and animation.” -  @Hélène Desaulniers 

I do the same approach.

 

Long Live HTML!

Userlevel 4
Badge +1

I’m curious about what you mean by “set to full”? Maybe I could explain the behavior.

 

@Hélène Desaulniers Let me explain. Let’s say I have a piece of vector art (say a branding component) is saved as an SVG with an intrinsic height/width (defined inside the SVG file itself) for clients to use. Now, if they were to use the Image widget to display this - even though the SVG file contains the height & width, the HTML IMG tag that calls it does not include those attributes - so I don’t think the browser could allocate space, which means it would contribute to CLS. None of the options in “Content > Image Size” will enable height/width attributes to be output. With a JPG image, setting this to “Full” does print the height/width attributes to the IMG tag.

 

Yes by default SVG fills the maximum space since their “size” in width and height is technically infinite. I usually don’t bother setting width/height on my SVG files and set it in the CSS because I might use the icons in different sizes across the site and it allows me to tweak its size on the spot.

Also, as a side note (this one is for you @Brian Erickson), I tend to integrate my vector illustrations as plain text with shortcodes/HTML widget, rather than using the image widget. It makes less requests to the server, the page loads faster and it let me retain maximum control over the SVG colors and animation.

I think this approach is great for components that I’m going to be managing exclusively on behalf of the client. That said in some projects, I think it would be great to have a really effective SVG option that enterprising clients can realistically manage on their own so that they can easily insert brand art into posts, etc. and still have it be optimized to the maximum extent automation allows.

Userlevel 4
Badge +2

Let me explain. Let’s say I have a piece of vector art (say a branding component) is saved as an SVG with an intrinsic height/width (defined inside the SVG file itself) for clients to use. Now, if they were to use the Image widget to display this - even though the SVG file contains the height & width, the HTML IMG tag that calls it does not include those attributes - so I don’t think the browser could allocate space, which means it would contribute to CLS. None of the options in “Content > Image Size” will enable height/width attributes to be output. With a JPG image, setting this to “Full” does print the height/width attributes to the IMG tag.

@Mark Blair 

 

Ah yes I never thought of this and it sounds like it sucks indeed. Al least I believe you can set a custom height if you use the image widget? Just “writing” the graphic as play HTML does help though because the SVG code becomes literally part of the DOM and loads with it. Therefore, no CLS.

 

And agreed for the icons. The way Elementor integrated icon sets as them being fonts only was so bothersome. I didn’t even bother. I made them into neat shortcodes instead.

Userlevel 4
Badge +1

Let me explain. Let’s say I have a piece of vector art (say a branding component) is saved as an SVG with an intrinsic height/width (defined inside the SVG file itself) for clients to use. Now, if they were to use the Image widget to display this - even though the SVG file contains the height & width, the HTML IMG tag that calls it does not include those attributes - so I don’t think the browser could allocate space, which means it would contribute to CLS. None of the options in “Content > Image Size” will enable height/width attributes to be output. With a JPG image, setting this to “Full” does print the height/width attributes to the IMG tag.

@Mark Blair

 

Ah yes I never thought of this and it sounds like it sucks indeed. Al least I believe you can set a custom height if you use the image widget?

 

 

@Hélène Desaulniers  Oddly enough (at least for me) the “custom size” options in “Content > Image Size” doesn’t output width/height attributes at all -- even for a jpg. It basically creates a new image in “wp-content/uploads/elementor/thumbs” with those dimensions but fails to include the height/width attributes. If I assign width in “Style > Width” I get CSS rules, but still no HTML tag attributes.

 

Just “writing” the graphic as play HTML does help though because the SVG code becomes literally part of the DOM and loads with it. Therefore, no CLS.

Yea, perhaps I should stop fighting with the Icon widget and shift over to that :-) As a hand coder myself for 25 years, it feels a bit like cheating on Elementor to me to use the HTML widget, and like there should be a more user-friendly way of making it happen :-) I’m a relative newbie to Elementor and trying to learn to work within the typical widgets wherever possible.

 

 

 

And agreed for the icons. The way Elementor integrated icon sets as them being fonts only was so bothersome. I didn’t even bother. I made them into neat shortcodes instead.

That’s an interesting idea! So you have a library of shortcodes setup for common icons you use that output SVGs?

Userlevel 4
Badge +2

I honestly wish Elementor was a bit more developer friendly because sometimes I feel widgets lack flexibility, on top of having enormous DOM output.

 

That’s an interesting idea! So you have a library of shortcodes setup for common icons you use that output SVGs?

And yes that is correct @Mark Blair! I have a whole shortcode function that just give me icons. It looks something like that on the surface: [icon name=”start”] and that’s it!

Userlevel 4
Badge +1

I honestly wish Elementor was a bit more developer friendly because sometimes I feel widgets lack flexibility, on top of having enormous DOM output.

@Hélène Desaulniers To scratch the developer itch, I picked up Unlimited Elements, which looks like a pretty fun way to get started extending Elementor as you can create your own widgets. I’m not yet sure what kind of additional performance overhead might exist in using the plugin as I’ve out it on the shelf while I steep myself in the fundamentals.

I’m going “all in” on Elementor, and so I ultimately plan on coding helper widgets in PHP (rather than using UE) to fill gaps as plugin but want to prototype them first in UE. I intend to keep the number to a minimum because I never like to be on the hook for maintaining too much custom code :-)  

 

And yes that is correct @Mark Blair! I have a whole shortcode function that just give me icons. It looks something like that on the surface: [icon name=”start”] and that’s it!

I think I’ll do this. Thanks for the idea!

Userlevel 4
Badge +2

@Mark Blair 

Hah! Why create your own widget through plugins when shortcodes can do the trick. Less plugins is better after all (as a rule of thumb), and I get directly what I want. I still need get better with CSS in terms of structure, so I’m thinking I should choose on of the CSS paradigms that already exist , but so far I like being able to use “custom widgets” with just shortcode. 

I use them generally only for dynamic content too, for which I find that Elementor is not be as good as it could be (I use Advanced Custom Field). That’s another thing I’d like to see better support for from Elementor.

And when it comes to performance, I usually do everything quick and dirty at first then optimize later with more code “from scratch” as part of my site maintenance.

 

Also, if you wish I can let you know how I build my icon shortcode and give you my full snippet, so you don’t have to rewrite it all that much if you use it.

Reply