Happy Halloween! Get 20% off GP Premium with the discount code: HALLOWEEN20

[Resolved] font to svg

Home Forums Support font to svg

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #886126
    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 ?

    #886311
    David
    Staff
    Customer Support

    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.

    #886843
    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

    #886873
    David
    Staff
    Customer Support

    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.

    #886996
    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) ?

    #887108
    David
    Staff
    Customer Support

    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

    #887112
    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

    #887150
    David
    Staff
    Customer Support

    Awesome – glad to be of help.

    #887953
    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

    #888145
    David
    Staff
    Customer Support

    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.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.