[Resolved] font to svg

[Sebastien]

hi,

I use to display my icons with font method (using woff2 files).
As I met issues with speed, and also because I know GP is going to also have an option to use svg instead of font, I conclue in an optimization quest that I have to also stop using woff2 and replace them by svg.

Then, I’ve uploaded my svg icons.
So I have to choose the best way to use svg icons…
I’ve noticed several way to use them like: img ; use ; inline ; object ; base64 …
My plan is to optimize the speed, and to be able to customize color/size etc. I use WP Rocket for cache plugin.

Could you advice me the best practice I should follow to reach my aim please? =)

edit: another question==> Would it be better to use SVG LOGO than PNG LOGO ?

[David]

Hi there,

the best method is to add them inline. You can then style the SVG element using the fill and stroke CSS properties. Sprite (USE) method makes requests for each SVG, and Base64 encoding can’t be cached by the browser.

Yes SVG is better then PNG.

[Sebastien]

hi,
Thanks you so much.

I use Safe SVG plugin.
I’ve managed to replace my old font in the content of my page by inline svg as you adviced me.
But I also use icon in my menu into the main nav bar.

If I put the inline svg tag directly next the title of the menu, I get some error.
About Menu Icons Plugin, it seems to only display svg in IMG.

1)How would you recommand to integer proprely svg icon into the menu?
2)About favicon, I tend to use RealFaviconGenerator, to generate the package of favicons. it generates png. Is it the best practice or should I use SVGs to avoid some request/useless loading time?
3)Can you confirm, that I always need to rewrite the full svg inline code for each Icon I need to display even if I’ve already loaded one of them? I mean, if I use one icon several time, I always need to rewrite the inline code? No way to reuse the ID by calling it ?

thanks

[David]

Hi there,

1. what error are you getting? And what does your SVG code look like?
2. Stick with how you’re doing it – PNG is the best supported format.
3. Yes, if you’re adding the code inline then you have to do it for each time you add it.
You may want to check out SVG support plugin:

https://wordpress.org/plugins/svg-support/

One of its features is inlining an SVG added from your media library as well as doing what SafeSVG does.

[Sebastien]

1) it is a security warning from security plugin, and then I can found an error into https://developers.google.com/speed/pagespeed/insights/?hl=fr&url=https%3A%2F%2Fsiar.re%2F&tab=desktop

asking for preload?

the code i use: <?xml version="1.0" encoding="utf-8"?><svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>icon-service-inspection</title><path d="M10,4.66H8.85A3.87,3.87,0,0,0,5.34,1.15V0H4.66V1.15A3.87,3.87,0,0,0,1.15,4.66H0v.68H1.15A3.87,3.87,0,0,0,4.66,8.85V10h.68V8.85A3.87,3.87,0,0,0,8.85,5.34H10ZM5.34,8.17V7H4.66V8.17A3.21,3.21,0,0,1,1.83,5.34H3V4.66H1.83A3.21,3.21,0,0,1,4.66,1.83V3h.68V1.83A3.21,3.21,0,0,1,8.17,4.66H7v.68H8.17A3.21,3.21,0,0,1,5.34,8.17Z"/></svg>

2) about SVG support plugin, it seems it makes ONE request for each SVG I use (in advanced mode with the inline class) ?

[David]

Hmmm… not an issue i have experienced. I assume your security plugin doesn’t like it.
Try stripping back the SVG to:

<svg id="Calque_1" viewBox="0 0 10 10"><path d="M10,4.66H8.85A3.87,3.87,0,0,0,5.34,1.15V0H4.66V1.15A3.87,3.87,0,0,0,1.15,4.66H0v.68H1.15A3.87,3.87,0,0,0,4.66,8.85V10h.68V8.85A3.87,3.87,0,0,0,8.85,5.34H10ZM5.34,8.17V7H4.66V8.17A3.21,3.21,0,0,1,1.83,5.34H3V4.66H1.83A3.21,3.21,0,0,1,4.66,1.83V3h.68V1.83A3.21,3.21,0,0,1,8.17,4.66H7v.68H8.17A3.21,3.21,0,0,1,5.34,8.17Z"/></svg>

2. Not sure – but presumably it has to parse the media file first before inlining. So maybe not an option lol

[Sebastien]

David,
Thanks you so much, you definitly help me to understand how svg works.
Your code works perfectly and now I don’t have anymore error with svg inline in menu 🙂
My loading page seems really better now =)

Now I’ve been able to replace myicon.woff2 request by svg inline, I’m waiting for GP 2.3 to enable to delete the last woff2 remaining (the generatepress.woff2 !!)

thanksss

[David]

Awesome – glad to be of help.

[Sebastien]

hi,
Is there anyway to declare every SVGs code (just once) into the header (or hook, or wherever)? to be able to call them wherever I need in the pages?
It would be easier to call them by using ID and to edit SVGs codes.
note: I use WPRocket cache plugin.
thanks

[David]

Not that i am aware of. The closest thing is to declare a SVG Sprite. I found this a while ago, might be of use:

https://www.thinkaquamarine.com/development/aqua-svg-sprite-plugin/

But there’s not much more i can add on this.

[Author]

Posts