SVG with viewbox is not supported

[bykka]

Describe the bug
If to define a view box for svg image then it generate a blank page

To Reproduce
test case

        [TestMethod]
        public void SVGToComponentWithViewBox()
        {
            var svgString = @"
            <svg width=""200"" height=""200"" viewBox=""0 0 500 500"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink"" version=""1.1"" baseProfile=""full"">
  
                <rect width=""500"" height=""500"" x=""0"" y=""0"" id=""0"" fill=""none"" fill-opacity=""1""></rect>
                <g>
                    <path d=""M257.3743 62.6451L257.9642 47.6567L274 47.6567"" fill=""none"" stroke=""#5470c6""></path>
                    <path d=""M260.0919 437.2282L260.8993 452.2065L272 452.2065"" fill=""none"" stroke=""#91cc75""></path>
                    <path d=""M222.723 64.4947L166 73.8823"" fill=""none"" stroke=""#fac858""></path>
                    <path d=""M240.1034 62.7614L239.3117 47.7823L190 47.7823"" fill=""none"" stroke=""#ee6666""></path>
                    <path d=""M250 62.5A187.5 187.5 0 0 1 264.7371 63.08L250 250Z"" fill=""#5470c6"" stroke=""white"" stroke-linejoin=""round""></path>
                    <path d=""M264.7371 63.08A187.5 187.5 0 1 1 215.2561 65.7472L250 250Z"" fill=""#91cc75"" stroke=""white"" stroke-linejoin=""round""></path>
                    <path d=""M215.2561 65.7472A187.5 187.5 0 0 1 230.2344 63.5447L250 250Z"" fill=""#fac858"" stroke=""white"" stroke-linejoin=""round""></path>
                    <path d=""M230.2344 63.5447A187.5 187.5 0 0 1 250 62.5L250 250Z"" fill=""#ee6666"" stroke=""white"" stroke-linejoin=""round""></path>
                    <text dominant-baseline=""central"" text-anchor=""end"" style=""font-size:12px;font-family:sans-serif;"" xml:space=""preserve"" transform=""translate(375 47.6567)"" fill=""#333"" stroke=""rgb(255,255,255)"" stroke-width=""2"" paint-order=""stroke"" stroke-miterlimit=""2"">No Value</text>
                    <text dominant-baseline=""central"" text-anchor=""end"" style=""font-size:12px;font-family:sans-serif;"" transform=""translate(375 452.2065)"" fill=""#333"" stroke=""rgb(255,255,255)"" stroke-width=""2"" paint-order=""stroke"" stroke-miterlimit=""2"">Airplane</text>
                    <text dominant-baseline=""central"" text-anchor=""start"" style=""font-size:12px;font-family:sans-serif;"" transform=""translate(125 73.8823)"" fill=""#333"" stroke=""rgb(255,255,255)"" stroke-width=""2"" paint-order=""stroke"" stroke-miterlimit=""2"">Car</text>
                    <text dominant-baseline=""central"" text-anchor=""start"" style=""font-size:12px;font-family:sans-serif;"" transform=""translate(125 47.7823)"" fill=""#333"" stroke=""rgb(255,255,255)"" stroke-width=""2"" paint-order=""stroke"" stroke-miterlimit=""2"">Train</text>
                </g>
            </svg>";

            try
            {
                var component = Document.Parse(new StringReader(svgString), ParseSourceType.DynamicContent);
                var svg = (SVGCanvas)component;

                Assert.IsInstanceOfType(svg, typeof(SVGCanvas));
                
                using var doc = new Document();
        
                doc.Pages.Add(new Page
                {
                    Contents = { svg }
                });

                doc.SaveAsPDF("svg.pdf", FileMode.Create);
            }
            catch
            {
                Assert.Fail("Svg image has not been parsed");
            }
        }

Expected behavior
a scaled svg image

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser Firefox
• Version 118.0.1

[bykka]

After some time playing with example I figured out that actually it is not a viewbox problem - it is height problem. Original svg has been generated to for 500x500 px and if to change the height to something smaller than svg is not displayed

[richard-scryber]

Hi Pavlo, thank you, and also for investigating further for me. I think this may be due to overflow hiding (if it doesn't fit then it will try and overflow, if it can't overflow then it is hidden). I can look at this and see if there is a css style that can be applied immediately to solve and look at a long term fix for all SVG drawings.