Problems with SVG forum icons

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
User avatar
Remnt
Registered User
Posts: 10
Joined: Sun Jul 14, 2019 1:06 am

Problems with SVG forum icons

Post by Remnt » Sun Oct 20, 2019 4:23 pm

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.
Attachments
icon_read.png
icon_read.png (2.83 KiB) Viewed 609 times
icon_unread.png
icon_unread.png (2.79 KiB) Viewed 609 times

User avatar
Mannix_
Registered User
Posts: 585
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: Problems with SVG forum icons

Post by Mannix_ » Sun Oct 20, 2019 4:48 pm

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
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Need help with styling or want me to port a style to 3.2.x etc. contact me here or here.

User avatar
EA117
Registered User
Posts: 1145
Joined: Wed Aug 15, 2018 3:23 am
Contact:

Re: Problems with SVG forum icons

Post by EA117 » Sun Oct 20, 2019 10:19 pm

Remnt wrote:
Sun Oct 20, 2019 4:23 pm
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.

Remnt wrote:
Sun Oct 20, 2019 4:23 pm
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.

Post Reply

Return to “[3.2.x] Styles Support & Discussion”