[Support request] svg logo – the up to date how to

Home Forums Support svg logo – the up to date how to

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1392007
    Carlo

    Hi there,

    I’m a little confused about the right way to upload an svg logo.

    In some past posts I read that safe svf plugin should be used.
    In some other recent posts (that I can’t find right now) I’ve read that copying/pasting the code of the svg file (opening it using a text editor) should be enough.

    1) What’s the right way to safely handle svg files? 🙂
    2) Can we simply upload them to the media library or is it still unsafe?

    I am talking about:
    – the logo in particular
    – icons / images in general

    Thank you!

    #1392107
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Using the Safe SVG plugin will make it safe to upload the SVG to the Media Library.

    If you want to use inline SVG, you can do something like this:

    add_filter( 'generate_logo_output', function() {
        return sprintf( // WPCS: XSS ok, sanitization ok.
            '<div class="site-logo">
                <a href="%1$s" title="%2$s" rel="home">
                    YOUR INLINE SVG HTML HERE
                </a>
            </div>',
            esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
            esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
        );
    } );
    #1393340
    Carlo

    Hi Tom,

    thank you, I tried safe svg plugin and it works as suggested.

    I am also using generateblocks heading icons. They are great.

    How could I use those icons in a bullet list? (the usual ul / li list)

    i.e. this one:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" aria-hidden="true"><path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z" fill="currentColor"></path></svg>

    #1393472
    Leo
    Staff
    Customer Support
    #1393473
    Leo
    Staff
    Customer Support
    #1393540
    Carlo

    Hi Leo,

    Thank you for your reply.

    Headline blocks is what I am using so far.

    I was wondering if there is a way to replace the standard bullet list with one of the svg icons taken from those of the headline blocks. (see my example in the code in my previous post).

    This way, I could make an author’s life easier when posting 🙂

    #1393947
    David
    Staff
    Customer Support

    Hi there,

    not easy to add inline SVGs to a standard List.
    It can be done using img or background image properties but that requires an image request.

    #1396451
    Carlo

    Ok. Thank you David.

    #1396837
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.