Search code examples
svgrenderingviewport

Why is SVG subimage displayed improperly in chrome, unless viewport is made bigger than required


I am rendering SVG image out of multiple subimages (visualising industrial installation). And parts of those subimages are not rendered in chrome when viewport is set to smallest possible extent ( other viewers like one in IntelliJ do not have any prolbem with it ). Image is assembled from subimages along negative Y-Axis,and then rotated into viewport. Viewport size is calculated to include all corner points of all the modules.

SVG with display problems in chrome:
http://www.pribluda.de/test_svg/testRender_90.svg

( segments are cut on the left side )

Same SVG, but with wiewport height increased is displayed properly:

http://www.pribluda.de/test_svg/testRender_x18.svg

And when rotated only 45 degrees:

http://www.pribluda.de/test_svg/testRender_45.svg

Images created with plain rectangles instead of actual module pictures do not have this problem - unfortunately I can not change those module images as they come from third party.

Any ideas?


Solution

  • OK, here comes the answer. As it turns out, indivudual subimages had no explicit width and height set. Once this problem was adressed, everything started to work as intendet:

    http://www.pribluda.de/test_svg/testRender.svg

    It seems important for chrome rendering engine to have this information - otherwise parts of the images may be optimised away.

    Before:

      <g transform="matrix(0.0 1.0 -1.0 -0.0 0.0 -0.0) "
    ><g transform="matrix(1.0 0.0 0.0 1.0 0.0 -225.0) "
      ><svg contentScriptType="text/ecmascript" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" modulenr="0" contentStyleType="text/css" id="Layer_1" data-name="Layer 1" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.0"
        ><defs
    

    After:

    <g xmlns="http://www.w3.org/2000/svg" transform="matrix(0.0 1.0 -1.0 -0.0 0.0 -0.0) "><g transform="matrix(1.0 0.0 0.0 1.0 0.0 -225.0) "><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" contentScriptType="text/ecmascript" width="130" zoomAndPan="magnify" modulenr="0" contentStyleType="text/css" height="225" id="Layer_1" data-name="Layer 1" preserveAspectRatio="xMidYMid meet" version="1.0">....