Problems with SVG forum icons

[Remnt]

I'm editing the forum icons via: /theme/images/icons/ and I noticed only the svg icons are used for forum icons.

The SVGs I upload don't show at all: https://www.animalcrossingportal.com/forums/

Is there a way to either:

1. Make the forum use the png icons instead.

2. Get the SVGs to show?

I've attached the 2 files i've been trying to convert to SVGS. I was unable to attach the svgs.

[Mannix_]

Your svg icon doesn't seem to be a proper svg image. I've tested this image https://css-tricks.com/wp-content/uploa ... 5/kiwi.svg and all works fine so you need to work out what's the problem with your image, maybe saving settings. Plus the size for the image is missing from dl.row-item class I've added 32px to control the size of the image. All can be seen in the attached image

2019-10-20 18.46.30 www.animalcrossingportal.com a25780e84762.png

[EA117]

1. Make the forum use the png icons instead.

Remove the .SVG background image references from the CSS files in the style, so that the only background-image: properties available for selection are the ones with URLs to .PNG images. We're of course only talking about removing the ones which aren't displaying correctly, and not SVG images provided with the style which are displaying correctly even now.

I've attached the 2 files i've been trying to convert to SVGS. I was unable to attach the svgs.

In case it's not already a given, note that "converting them to SVG" will involve actually re-drawing or having the original vector source for these icons. So that you can save an SVG which contains vector-based data, and therefore can be infinitely scaled without resolution issues. i.e. You're not saving an SVG from a PNG image you have open in Photoshop; you're saving an SVG from a vector-based drawing you've made in Illustrator.

These SVGs currently on the site, such as your icon_read.svg, actually contain only an embedded PNG image via xlink:href image. Meaning the PNG is just being "saved in an SVG container", rather than any "conversion to an actual vector-based SVG."

As noted in the documentation linked above, this specific xlink:href method of embedding an image in an SVG was deprecated some time ago. That is probably the real reason "nothing is being displayed" in the instances where you're seeing this; and not because "an SVG which contains only an embedded PNG image" is considered invalid. Embedding a thumbnail or image in the SVG is not unusual; but is typically in addition to the vector-based SVG data. Without any vector data in this SVG, and with the embedded PNG image being included in a deprecated format, some web browsers will be left without any data to actually display.

(For what it's worth in my testing here, Chrome wouldn't display this SVG as part of CSS, but will display the PNG embedded in this SVG if you open the image URL directly. Microsoft Edge on the other hand was happy to display this SVG even as part of CSS, and your site "looked normal"; albeit still showing the embedded bitmap-based image "when displaying the SVG file", and not any kind of actual scaleable image.)

Bottom line: If you're intending to have the vector-based benefits of using SVG file format, you'll need to have a vector-based source drawing to save in SVG format; not simply the PNG file. If all you're going to do is embed a PNG image inside the SVG container (even if you update to an application which uses the non-deprecated SVG href image attribute instead of xlink:href), there would be no benefit to involving SVG at all; and you should simply only include the existing PNG image version of the background image in the CSS.