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

[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!

[Tom]

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' ) ) )
    );
} );

[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>

[Leo]

You can use the headline blocks in GB with icons:
https://docs.generateblocks.com/article/headline-overview/#icon

[Leo]

You can use the headline blocks in GB with icons:
https://docs.generateblocks.com/article/headline-overview/#icon

[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 🙂

[David]

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.

[Carlo]

Ok. Thank you David.

[David]

You’re welcome

[Author]

Posts