SVG
SVG copied to clipboard
SVG Draw produces cropped text as PNG
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:
However, attached is the PNG that ends up being rendered and saved:
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).
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.
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.
Same Problem (text cutoff) on Arch using SVG 3.4.4