SVG icon indicating copy to clipboard operation
SVG copied to clipboard

SVG Draw produces cropped text as PNG

Open cidthecoatrack opened this issue 3 years ago • 3 comments

Description

I am using the following code to render an SVG on top of an image:

        private async Task<Stream> GetStampedImageStreamAsync(Stream sourceStream, GetWatermarkResponseSettings watermarkSettings, bool withSpecial)
        {
            var destinationStream = new MemoryStream();

            using (var assetImg = Image.FromStream(sourceStream))
            {
                var svg = string.Empty;

                if (watermarkSettings.IsText)
                {
                    svg = GetTextWatermarkSvg(assetImg, watermarkSettings, withSpecial);
                }
                else
                {
                    svg = await GetImageWatermarkSvgAsync(assetImg, watermarkSettings, withSpecial);
                }

                _logger.Log($"SVG: {svg}");

                var svgDocument = Svg.SvgDocument.FromSvg<Svg.SvgDocument>(svg);

                using (var g = Graphics.FromImage(assetImg))
                //using (var wm = svgDocument.Draw(assetImg.Width, assetImg.Height))
                {
                    //g.DrawImage(wm, 0, 0, assetImg.Width, assetImg.Height);
                    svgDocument.Draw(g);
                    assetImg.Save(destinationStream, assetImg.RawFormat);
                }

                return destinationStream;
            }
        }

The SVG contains some text as a watermark. On simple SVG rendering websites (such as here), the text all renders correctly. An example PNG is attached of the expected outcome: svgviewer-png-output

However, attached is the PNG that ends up being rendered and saved: preview_df57be5d-939e-4d11-b4fe-d42d5b9e7114_overlay

Notice that the text is cut off after a certain width. Also, the text is slightly larger than expected, and in certain views, is more pixelated/has more anti-aliasing/is more bold (this is reminiscent of #253). Both images are 1920 x 1080. The PNG is also much smaller then I would expect (26KB as opposed to 118KB). If there is some sort of compression going on that is causing a problem, I would like to remove that - but I don't see where or how that would be happening. The stream to which the SVG is writing is just a clear BMP of the same dimensions.

Most importantly, I need the text to not be cut off. Other factors, such as the anti-aliasing and font sizing, are fudgeable if need be.

Example data

Here is the SVG in question:

<svg style="align-items: baseline; display: flex; height: auto;" height="1080px" width="1920px" xmlns="http://www.w3.org/2000/svg"> 
<text style="fill: #fff; font-family: Arial, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);" font-size="87.35545px" x="386.5" y="488.5">Karl Collection Watermark</text> 
<text style="fill: #fff; font-family: Arial, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);" font-size="16px" x="0" y="0">
<tspan style="fill: #fff; font-family: Arial, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);" font-size="16px" dy="1.4em" x="0">Karl Speer</tspan> 
<tspan style="fill: #fff; font-family: Arial, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);" font-size="16px" dy="1.4em" x="0">[email protected]</tspan> 
<tspan style="fill: #fff; font-family: Arial, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);" font-size="16px" dy="1.4em" x="0">209.148.34.82</tspan> 
<tspan style="fill: #fff; font-family: Arial, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);" font-size="16px" dy="1.4em" x="0">Sample Organization</tspan> 
<tspan style="fill: #fff; font-family: Arial, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);" font-size="16px" dy="1.4em" x="0">Karl's Account</tspan> 
<tspan style="fill: #fff; font-family: Arial, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);" font-size="16px" dy="1.4em" x="0">This collection belongs to Karl</tspan> 
</text> 
</svg>

Nothing complicated - the overall height and width is matched to the original image size.

Used Versions

I am using the latest SVG package (3.3.0) in a dotnet core 3.1 lambda container (public.ecr.aws/lambda/dotnet:core3.1) with libgdiplus installed. The container is using CentOS.7/Amazon Linux 2 (64-bit).

cidthecoatrack avatar Sep 29 '21 14:09 cidthecoatrack

An interesting development: when run on a Windows machine via a console app, the SVG renders correctly, and the text is not cut off. This may indicate that the issue is with running in CentOS container - which would be very unfortunate for us, as we need that particular OS to run this container as a Lambda with AWS.

cidthecoatrack avatar Sep 29 '21 15:09 cidthecoatrack

This may be an issue with libgdiplus. It could help if someone could test this under other OSes (Ubuntu, MacOS) to see if it is a general *NIX problem, or specific to CentOS.

mrbean-bremen avatar Oct 01 '21 19:10 mrbean-bremen

Same Problem (text cutoff) on Arch using SVG 3.4.4

204050 avatar Feb 28 '23 18:02 204050