SVG icon indicating copy to clipboard operation
SVG copied to clipboard

PNG export with stroke-dasharray not accurate

Open AncientGrief opened this issue 3 years ago • 0 comments

Description

Saving a SvgDocument as PNG with an path having stroke-dasharray renders the stroke not 100% accurate:

Original in Chrome: image

Generated PNG (see the bottom right, there's an extra dot): image

Example data

<?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 width="100%" height="100%" viewBox="0 0 733 493" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;">
    <g id="Seam" transform="matrix(1.08442,0,0,0.989011,-289.512,-782.258)">
        <path d="M915.624,853.953C915.624,835.594 902.03,820.688 885.286,820.688L324.433,820.688C307.689,820.688 294.094,835.594 294.094,853.953L294.094,1225.87C294.094,1244.23 307.689,1259.13 324.433,1259.13L885.286,1259.13C902.03,1259.13 915.624,1244.23 915.624,1225.87L915.624,853.953Z" style="fill:none;stroke:rgb(10,10,10);stroke-width:13.75px;stroke-dasharray:27.49,27.49,0,0;"/>
    </g>
</svg>

Example code

Complete C# .NET 6 Console App:

using System.Text;
using Svg;

string output = "C:\\temp\\output.png";
string svg =
@"<?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 width=""100%"" height=""100%"" viewBox=""0 0 733 493"" version=""1.1"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink"" xml:space=""preserve"" xmlns:serif=""http://www.serif.com/"" style=""fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;"">
    <g id=""Seam"" transform=""matrix(1.08442,0,0,0.989011,-289.512,-782.258)"">
        <path d=""M915.624,853.953C915.624,835.594 902.03,820.688 885.286,820.688L324.433,820.688C307.689,820.688 294.094,835.594 294.094,853.953L294.094,1225.87C294.094,1244.23 307.689,1259.13 324.433,1259.13L885.286,1259.13C902.03,1259.13 915.624,1244.23 915.624,1225.87L915.624,853.953Z"" style=""fill:none;stroke:rgb(10,10,10);stroke-width:13.75px;stroke-dasharray:27.49,27.49,0,0;""/>
    </g>
</svg>
";

byte[] bytes = Encoding.ASCII.GetBytes(svg);

using MemoryStream msSvgStream = new(bytes);

SvgDocument doc = SvgDocument.Open<SvgDocument>(msSvgStream);

doc.Draw()?.Save(output);

Used Versions

.NET Core 6 Svg 3.4.3 Windows 10

AncientGrief avatar Aug 13 '22 03:08 AncientGrief