Uploaded SVG renders incorrectly
Closed this issue · 17 comments
SVG source code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3850 1250">
<path fill="#ed1c24" d="M2369 515c-73-107-210 39-210 39s-146 111-180 176c-112 21-900 162-1491 64-591-99-450-299-30-459 415-158 681-192 1088-210 0 0 361 18 416 65 30 26 21 62 21 62 164-144 73-292-617-242C667 60 60 233 8 540c-51 308 343 476 1105 450 763-26 772-81 832-77 30-30 55-69 55-69 43 47 112 120 240 26 129-94 223-218 129-356zm-176 270s-86 55-94 17c-26-120 90-162 120-175 0 0 4-56 68-56 117 0-17 154-94 214zm1269-173c148-15 216 6 238 10-5-42 43-97-152-94-240 5-253 47-253 47-105 103 14 167 103 163 96-4 115 30 115 30-77 9-244 0-278 13-35 13-193 94 47 103 257 9 513-30 313-193l-189-47s-86-18 56-32zm-685 166c-70 50-176 90-270 123 0 0-4 43-8 137-4 95 47 244-47 206l-60-60a2191 2191 0 0 1 43-613c28-143-9-107 90-111 60-3 47 43 38 77 35-13 182-50 266 47a137 137 0 0 1 30 49c8 29 2 56-15 82a216 216 0 0 1-46 47 373 373 0 0 1-20 16zm-124-186s-107 13-120 30c0 47-22 165 0 159 137-39 407-210 120-189zm209 159l6-36 14-82c10-53 19-110 23-140 116-55 103 0 103 48 154-39 192 26 192 26 150 123-128 263-235 297l-7 178c-4 153 65 204-83 154-56-18-26-290-26-350-42-35-52-55-47-67v-1c3-7 10-12 20-16l40-11zm120 0c124-30 288-181 150-159-141 24-150 52-150 52s-4 108 0 107zm773-312v10h-20v53h-13v-52h-20v-10h53zm69 63l-3-37v-18c-3 6-4 13-6 20l-12 34h-13l-11-36-5-18v18l-3 37h-12l4-63h20l10 30 4 17 5-16 11-31h19l4 63h-12z"/>
</svg>
The sample SVG is output from SVGO; Inkscape and all browsers have no issues rendering it.
Here's what RFG rasterizes it to:
Same problem here, but with a different SVG.
I also see an issue with svg. Not sure what version is needed for them
Needs to be like this
But renders like this
I also checked it without the gradient and still gets chopped in half. Also made sure its 16x16
RFG relies on InkScape to process SVG. Could you post your SVG image for review? You can copy/paste its XML as a comment if GH does not support this image format.
I think i already did try to clean the SVG of all the extra info. Still would not work. Also tried it wit a solid background. Perhaps its because its made of curve points?
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
<defs>
<linearGradient id="linear-gradient" x1="4.23" y1="13.25" x2="12.01" y2="7.09" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#009de0"/>
<stop offset="1" stop-color="#f7ea3a"/>
</linearGradient>
</defs>
<title>logoB</title>
<path d="M7.7,3.7,8.3,3a2.6,2.6,0,0,1,2.6-.6,2,2,0,0,1,1,1.6,11.3,11.3,0,0,1,0,2.6,1.8,1.8,0,0,0,.8,1.8,6.4,6.4,0,0,1,1.9,1c.8.9.3,2.1-.3,2.9s-2.5,1.9-3.8,1.2A8.4,8.4,0,0,0,8,12.2a5,5,0,0,0-3.4.9,3.1,3.1,0,0,1-2.2.5,2,2,0,0,1-1.4-1.5A2.7,2.7,0,0,1,2.3,9.2l2-1A8.1,8.1,0,0,0,6,7.1,5.2,5.2,0,0,0,7,5.3,8.1,8.1,0,0,1,7.7,3.7Z" fill="url(#linear-gradient)"/>
</svg>
I just tried removing the part "data-name=.... till the closing tag. Than i get an error that the image isnt square. This is the case, not sure why that is needed. But after that it was completly empty.
EDIT
I added an empty square and didnt even clean the file of Illustrator stuff. Now it does create a nice icon :)
Should have tried that.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:none;}
</style>
<title>logoB</title>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="4.2502" y1="2.6144" x2="12.0302" y2="8.7744" gradientTransform="matrix(1 0 0 -1 0 15.89)">
<stop offset="0" style="stop-color:#009DE0"/>
<stop offset="1" style="stop-color:#F7EA3A"/>
</linearGradient>
<path class="st0" d="M7.7,3.7L8.3,3C9,2.3,10,2.1,10.9,2.4c0.6,0.3,1,0.9,1,1.6c0.1,0.9,0.1,1.7,0,2.6c-0.1,0.7,0.2,1.4,0.8,1.8
c0.7,0.2,1.3,0.6,1.9,1c0.8,0.9,0.3,2.1-0.3,2.9s-2.5,1.9-3.8,1.2c-0.8-0.6-1.6-1-2.5-1.3c-1.2-0.1-2.4,0.2-3.4,0.9
c-0.6,0.4-1.4,0.6-2.2,0.5c-0.7-0.2-1.2-0.8-1.4-1.5C0.8,11,1.3,9.8,2.3,9.2l2-1C4.9,7.9,5.5,7.5,6,7.1C6.4,6.6,6.8,6,7,5.3
C7.2,4.7,7.4,4.2,7.7,3.7z"/>
<rect class="st1" width="16" height="16"/>
</svg>
Sorry for the fuzz
I'm having a similar problem - #406
@derpmarine168
Did you try what i did and clean the SVG from all the info in the header? You can easily edit the SVG in i think any simple text editor or code app.
I put it through SVGO - that removes all meta. You can look at the code in the issue.
I had the same issue as you, i manually cleaned the svg and than i showed just fine. Some of the info in the SVG causes the issues.
It's about as clear as I think I can get it, and it still has issues.
can you share the file? Perhaps i can help or find something
It’s in the issue I opened - in the summary tag.
I noticed an uploaded svg failing to render one of the paths.
Trial and error suggests the issue is with the a path instruction (removing a75.4,75.4,0,0,1-0.467,11.734 before re-uploading the svg results in the shape being rendered).
I’ve extracted the offending path:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 260">
<path fill="#00529a" d="
M
138.623,172.259,81.291,108.53
a
75.4,75.4,0,0,1-0.467,11.734
c
-0.965,7.734-6.892,12.863-6.892,12.863
l
35.2,39.132
s
9.777,11.342,18.78,11.342
H
157.4
c
-9,0-18.776-11.342-18.776-11.342" />
</svg>
The original image looks to be rendered correctly now. Thank you!
Confirmed fixed. Thank you.
Uploading an SVG as the initial image is much more likely to create a usable Safari tab file (without a separate upload), so this is a welcome fix!