0

Again an SVG rendering bug, so here we go.

What I did

I wanted to combined (or add) an arrow at the bottom of the Mastodon brand/icon and kept everything else, basically. (Switching the letter was easy, e.g., and can be ignored here) However, this lead to some rendering bugs in some software.

What I did in Inkscape was basically:

  1. Converting the arrow stroke to path.
  2. Creating a simple (or not so simple, in the first version) object, which has the same gradient as my original logo.
  3. Going to Object -> Clip path and setting the clip path, so the object uses the background gradient, but keeps it's arrow shape.

Aim

This was the end result I got (PNG here):
logo_optimized_128

And this is how it should look.

First broken version

First I had this Inkscape SVG:
unpublished_broken_version

(You may see the rendering bug here, already, as this is the original SVG.)

In Inkscape, this, however, renders properly as that:
unpublished_broken_version

In Firefox, this renders as this, however:
unpublished_broken_version_Firefox

Note how the arrow is just missing here. The size differences can of course be ignored, it's an SVG after all.

Also notice that saving the SVG as optimized (Inkscape uses a project called scour for that.) did not help in any way.

Second version

I re-did the whole thing as I may have done something wrong (I e.g. used the "Clean" option in Inkscape's File menu), and got the current version now:

Here another direct upload to keep the state of the SVG:
logo

This renders broken too in Firefox and my file explorer (GNOME Nautilus) and image viewer (Eye of GNOME):
grafik

However, if saved as "Optimized SVG", it works now (SVG version):
logo_optimized

This renders properly in Firefox (Screenshot/PNG):
logo_optimized_Firefox

GNOME, however, again handles this a little awkwardly:
absolutely weird

Note how the arrow somehow has a stroke or so, but is only partially filled or whatever it shows.

System

Operating system and version: Fedora Silverblue 37
Browser and version: Firefox 107.0.1
Inkscape:

Inkscape 1.2.2 (b0a8486541, 2022-12-01)

    GLib version:     2.72.4
    GTK version:      3.24.35
    glibmm version:   2.66.1
    gtkmm version:    3.24.5
    libxml2 version:  2.9.12
    libxslt version:  1.1.34
    Cairo version:    1.16.0
    Pango version:    1.50.12
    HarfBuzz version: 3.0.0

    OS version:       GNOME 42 (Flatpak runtime)

GNOME 43.1

Given that the optimized version works in Firefox, this was okay for me, but it anyway would be good to know why/what happened and possibly be fixed, where-ever it needs fixing.

Upstream issue: https://github.com/rugk/mastodon-simplified-federation/issues/90

Improve this question
5
  • 2
    Don't use an arrow head. Browser support is generally behind SVG standards used in Inkscape. Firefox doesn't seem to be able to currently render Inkscape's arrow heads. Just draw an arrow head instead, and Unite it with your shape. Like this
    – Billy Kerr
    Dec 13, 2022 at 18:36
  • @BillyKerr But IIRC I've converted it to a path, as I said "stroke to path". Should not it then be a path thing instead of the arrow and should not that help?
    – rugk
    Dec 14, 2022 at 22:24
  • Also previously when the arrow head was not combined, a normal object and in a simple color, it worked flawless in all systems. See github.com/rugk/mastodon-simplified-federation/commit/… I've linkes above for diff.
    – rugk
    Dec 14, 2022 at 22:27
  • I am merely suggesting this to avoid the problem entirely. For some reason, some browsers/other software can't seem to render Inkscape's arrow markers. So, the obvious thing to do is not to use them. Also there's currently (as of V1.2.2) a bug in Inkscape when converting paths with arrow markers to outlines using Stroke to path. It makes the fill of the arrow head disappear, and messes up the orientation of the arrow head. So if you use that, you are going to have to do some manual fixing.
    – Billy Kerr
    Dec 15, 2022 at 10:53
  • Have these bugs been reported, BTW? I have found gitlab.com/inkscape/inbox/-/issues/7551, gitlab.com/inkscape/inkscape/-/issues/3363 and gitlab.com/inkscape/inbox/-/issues/7375, which may be the Inkscape bug, but most seem to be reported in v1.2.1. Also are these bugs for Inkscape arrows in browser and GNOME Eye known?
    – rugk
    Mar 26 at 10:38

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.