mattermost-mobile icon indicating copy to clipboard operation
mattermost-mobile copied to clipboard

SVG not rendering correctly on iOS app

Open theavey opened this issue 1 year ago • 3 comments

I am creating an SVG from Python and sending it to mattermost. It appears just fine on the desktop client but does not render correctly on the iOS app. I have tried to simplify the issue down to the simplest image that doesn't render properly.

This is how the messaage appears on desktop for me:

desktop screenshot of successfully rendered svg

And this is what I see on the iOS app:

iOS app screenshot of poorly rendered svg

And this is the SVG file (with the white background):

raw svg image

In case easier to work with, this is the contents of the svg:

Click to expand SVG code
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="72pt" height="56pt" viewBox="0 0 72 56" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <metadata>
  <rdf:RDF xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
   <cc:Work>
    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
    <dc:date>2025-01-22T13:42:31.664199</dc:date>
    <dc:format>image/svg+xml</dc:format>
    <dc:creator>
     <cc:Agent>
      <dc:title>Matplotlib v3.9.3, https://matplotlib.org/</dc:title>
     </cc:Agent>
    </dc:creator>
   </cc:Work>
  </rdf:RDF>
 </metadata>
 <defs>
  <style type="text/css">*{stroke-linejoin: round; stroke-linecap: butt}</style>
 </defs>
 <g id="figure_1">
  <g id="patch_1">
   <path d="M 0 56 
L 72 56 
L 72 0 
L 0 0 
z
" style="fill: #ffffff"/>
  </g>
  <g id="text_3">
   <!-- 10 -->
   <g transform="translate(37.31 45.863125) scale(0.14 -0.14)">
    <defs>
     <path id="DejaVuSans-31" d="M 794 531 
L 1825 531 
L 1825 4091 
L 703 3866 
L 703 4441 
L 1819 4666 
L 2450 4666 
L 2450 531 
L 3481 531 
L 3481 0 
L 794 0 
L 794 531 
z
" transform="scale(0.015625)"/>
     <path id="DejaVuSans-30" d="M 2034 4250 
Q 1547 4250 1301 3770 
Q 1056 3291 1056 2328 
Q 1056 1369 1301 889 
Q 1547 409 2034 409 
Q 2525 409 2770 889 
Q 3016 1369 3016 2328 
Q 3016 3291 2770 3770 
Q 2525 4250 2034 4250 
z
M 2034 4750 
Q 2819 4750 3233 4129 
Q 3647 3509 3647 2328 
Q 3647 1150 3233 529 
Q 2819 -91 2034 -91 
Q 1250 -91 836 529 
Q 422 1150 422 2328 
Q 422 3509 836 4129 
Q 1250 4750 2034 4750 
z
" transform="scale(0.015625)"/>
    </defs>
    <use xlink:href="#DejaVuSans-31"/>
    <use xlink:href="#DejaVuSans-30" x="63.623047"/>
   </g>
  </g>
 </g>
</svg>

theavey avatar Jan 22 '25 19:01 theavey

Hi @theavey, which of the thumbnails shown on the second screenshot correspond with the desktop thumbnail image?

amyblais avatar Jan 23 '25 13:01 amyblais

@amyblais It's the last one (13:47 timestamp)

theavey avatar Jan 23 '25 13:01 theavey

Opened https://mattermost.atlassian.net/browse/MM-62692.

amyblais avatar Jan 23 '25 14:01 amyblais