Site logo

Archived topic

Manually add SVGs in Top Bar & Footer, remove Social Icons plugin

2 replies · Started by Tro on March 25, 2021

Viewing posts 1–3 of 3

I'm using the Avery template for my friend's personal website. It's not one of the newer ones, so I changed it to Flexbox and made all the other adjustments. Now I want to remove Lightweight Social Icons plugin because it's old and still uses font icons.

To put SVG icons in the Top Bar and Footer Widget 2, I simply created a new menu called "Social Icons" and put them all as custom links. In the Navigation Labels, I copied & pasted the XML code from the GenerateBlocks social icons.

It works beautifully; the SVG icons show up. But is it secure? I wanted to consult with you guys before publishing.

null

If not, what's a better way to go about this? Putting the icons as a gallery widget instead of a menu? Or maybe recreating the Top Bar and Footer Widget area with GB and Elements (using buttons to create static menus and labelling their containers as headers and footers)?

I don't know how cross-site scripting works. So pardon my ignorance.

Okay, after doing some research, I read that as long as you create your own SVG icon or get one from a trusted source, you're fine because the inline JavaScript is not in the SVG's code. I guess that answers my question.

I was thinking that SVGs can be exploited when someone right-clicks on the icon, clicks "inspect", then inserts the script through the browser developer tools in order to get the browser to show sensitive data or something.

I'm sure you guys were confused about what I was asking above.

I'm still somewhat new at web design, so pardon my ignorance. I learned a decent amount of HTML and CSS but there's still a lot more that I need to learn. Anyway, take care.

Hi there,

Yeah, the danger is when you don't know what the contents of the SVGs are. Some creation tools embed JS and CSS for animation (like SVGator) but some individuals maliciously inject harmful scripts.

Creating your own means you have the perfect idea of where it came from and what's inside it.

I’m still somewhat new at web design, so pardon my ignorance. I learned a decent amount of HTML and CSS but there’s still a lot more that I need to learn. Anyway, take care.

Feel free to ask us if you need further help.

This archived topic is closed to new replies.