Why all the SVGs in the source code?

[Web242]

Hi, why so many SVGs in the source code? What are these for and are they necessary for CP to function properly?

[anon71687268]

They’re icons. SVG (scalable vector graphic) allows you to “create images with math” so to speak. The beauty of an SVG graphic is that it can be scaled to any dimension with zero loss of quality and the files are super small. Are they necessary? No. Are they a good thing? Yes.

If you remove all the icons from your site it would be like meeting someone who’d shaved off their eyebrows… you might not put your finger on “what’s wrong” immediately, but, you’ll perceive something is amiss.

Consider my logo file… rendered as a gif, jpg, or png image, I’m looking at probably 30k filesize and very limited resizing options. That same logo as an SVG image is only <2k and I can resize it to fit on Mt. Everest with no loss of quality.

If you use something like Font Awesome icons…you place an <i></i> tag in your pages…and they’re converted on-the-fly into their SVG counterparts.

The limitation of SVG is that you’re kind of stuck with “cartoony” graphics that have well-defined lines…SVG are incapable of rendering photo-realistic images.

[james]

@Web242 where do you see this - what source code?

[Web242]

Hi James, I’m getting this on any of my CP sites I install via Installatron. I can’t share the agency redesign, but it shows on our test site here:

cp.web242.com

[james]

OK, thanks. These are part of the twentyseventeen theme that we inherited from WP.

[Web242]

Hi @anon71687268 thanx for the info and replying back. That’s not what I meant. What I am seeing is all these SVGs in my CP source code - see comment below to James. I don’t think it should be doing that.

[Web242]

Ah very good, then those can be removed on the next theme update.

Have any handy filter I can put in functions.php to remove them in mean time?
Thanx James!

[anon71687268]

As James mentioned, these are coming from the theme. Iconography is pretty standard in themes from the last decade. To remove them, you can un-enqueue (comment-out in the PHP where) the style CSS/JS is getting loaded…however, then you’re still going to have a bunch of unrendered icons on your site because the HTML tags will still be in place.

[james]

This looks like it should work:

function remove_parent_svg_icons() {
    remove_action( 'wp_footer', 'twentyseventeen_include_svg_icons', 9999 );
}
add_action( 'after_setup_theme', 'remove_parent_svg_icons' );

Source - Can’t remove twentyseventeen_include_svg_icons action in child theme | WordPress.org

It looks like this is used for a “social menu” function built in to the theme, so if you’re not using that then there shouldn’t be any extra HTML tags either.

[Web242]

Very good!