Commons SVG renders misplaced text
Open, Needs TriagePublicBUG REPORT
Actions

Assigned To

None

Authored By

	Msz2001
	Feb 25 2024, 12:37 PM

Description

Steps to replicate the issue (include links if applicable):

Navigate to: https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/F_dist_cdf.svg/440px-F_dist_cdf.svg.png

What happens?:
The text is rendered incorrectly, compare with https://upload.wikimedia.org/wikipedia/commons/8/8e/F_dist_cdf.svg

Labels on the PNG render are overlaid on other image elements, even though they shouldn't be.

What should have happened instead?:
Both the original SVG and rendered PNG should look alike.

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
This seems to be a recent issue because there are some prerendered versions of the image that don't exhibit this faulty behavior, eg. 320px wide (https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/F_dist_cdf.svg/320px-F_dist_cdf.svg.png) or 220px wide (https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/F_dist_cdf.svg/220px-F_dist_cdf.svg.png). Sizes in between, like 280px are affected though.

Wrong render: (https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/F_dist_cdf.svg/440px-F_dist_cdf.svg.png)

Expected: (https://upload.wikimedia.org/wikipedia/commons/8/8e/F_dist_cdf.svg in Microsoft Edge 121)

Related Objects

Mentioned In: T334372: Add support for inline SVG

Event Timeline

Msz2001 created this task.Feb 25 2024, 12:37 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 25 2024, 12:37 PM

https://commons.wikimedia.org/wiki/File:F_dist_cdf.svg

Fixed by moving style out of text element, so there seem to be some problem with the render possibly related to style cascade.

This was broken (text-anchor:end was ignored):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <g style="fill:none;color:#000;stroke:currentColor;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter">
    <path d="M142 528h18m598 0h-18"/>
    <g transform="translate(125 537)"><text style="stroke:none;fill:#000;font-family:Arial;font-size:24pt;text-anchor:end"><tspan> 0</tspan>
		</text></g>

This was fine:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <g style="fill:none;color:#000;stroke:currentColor;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter">
    ...
  </g>
    <g transform="translate(125 537)" stroke="none" fill="black" font-family="Liberation Sans" font-size="24.00"  text-anchor="end"><text><tspan>0</tspan></text></g>
`

view-source:https://upload.wikimedia.org/wikipedia/commons/archive/8/8e/20240225165128%21F_dist_cdf.svg

This is also fine:

<g style="stroke:none;fill:#000;font-family:Liberation Sans;font-size:24pt;text-anchor:end">
    <g transform="translate(125 537)"><text><tspan>0</tspan></text></g>
    <g transform="translate(125 438)"><text><tspan>0.2</tspan></text></g>
  </g>

Nux mentioned this in T334372: Add support for inline SVG.Sun, Apr 21, 5:56 PM

Commons SVG renders misplaced textOpen, Needs TriagePublicBUG REPORTActions

Description

Related Objects

Event Timeline

Commons SVG renders misplaced text
Open, Needs TriagePublicBUG REPORT
Actions