Wrong SVG rendering

Example SVG file which is improperly rendered:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1.6119999999999948 -0.695999999999998 74.88 41.6"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:#f04e23;}.cls-4{fill:#2a2a2d;}</style><clipPath id="clip-path" transform="translate(-36 -710.64)"><rect class="cls-1" x="36" y="710.64" width="72.171" height="40.896"/></clipPath></defs><title>logo-avi-networks</title><g class="cls-2"><path class="cls-3" d="M76.307,735.76a1.17,1.17,0,0,0,1.131.84h.072a1.173,1.173,0,0,0,1.133-.84l10.442-23.879a.653.653,0,0,0,.073-.364.922.922,0,0,0-.914-.876,1.1,1.1,0,0,0-.949.729L77.51,734.3l-9.747-22.893a1.09,1.09,0,0,0-.986-.766.96.96,0,0,0-.95.912.725.725,0,0,0,.073.4Z" transform="translate(-36 -710.64)"/><path class="cls-3" d="M48.851,711.48a1.168,1.168,0,0,0-1.131-.84h-.072a1.172,1.172,0,0,0-1.133.84L36.073,735.359a.653.653,0,0,0-.073.364.922.922,0,0,0,.914.876,1.1,1.1,0,0,0,.949-.729l9.785-22.93L57.4,735.833a1.09,1.09,0,0,0,.986.766.96.96,0,0,0,.95-.912.723.723,0,0,0-.073-.4Z" transform="translate(-36 -710.64)"/><path class="cls-3" d="M102.96,710.64a.967.967,0,0,0-.95.95v23.95a.95.95,0,0,0,1.9,0V711.59a.967.967,0,0,0-.95-.95" transform="translate(-36 -710.64)"/><path class="cls-4" d="M36.154,745.14a.246.246,0,0,1,.242-.241h.074a.3.3,0,0,1,.241.139l4.381,5.56v-5.476a.232.232,0,1,1,.464,0v6.126a.2.2,0,0,1-.195.205h-.036a.329.329,0,0,1-.241-.158l-4.466-5.663v5.6a.232.232,0,1,1-.464,0Z" transform="translate(-36 -710.64)"/><path class="cls-4" d="M49.1,751.535a2.353,2.353,0,0,1-2.322-2.469v-.018a2.334,2.334,0,0,1,2.247-2.469,2.242,2.242,0,0,1,2.172,2.45.231.231,0,0,1-.223.214H47.263a1.877,1.877,0,0,0,1.856,1.865,2.1,2.1,0,0,0,1.532-.649.2.2,0,0,1,.148-.065.217.217,0,0,1,.223.213.227.227,0,0,1-.074.158,2.408,2.408,0,0,1-1.847.77m1.605-2.7a1.754,1.754,0,0,0-1.7-1.837,1.843,1.843,0,0,0-1.744,1.837Z" transform="translate(-36 -710.64)"/><path class="cls-4" d="M56.494,750.208v-3.1h-.511a.223.223,0,0,1-.213-.213.214.214,0,0,1,.213-.2h.511v-1.318a.222.222,0,0,1,.223-.232.23.23,0,0,1,.232.232v1.318h1.485a.222.222,0,0,1,.213.214.214.214,0,0,1-.213.2H56.949v3.054a.83.83,0,0,0,.947.918,2.005,2.005,0,0,0,.538-.092.212.212,0,0,1,.2.2.206.206,0,0,1-.148.195,1.961,1.961,0,0,1-.669.12,1.21,1.21,0,0,1-1.327-1.3" transform="translate(-36 -710.64)"/><path class="cls-4" d="M64.935,751.285l-1.55-4.261a.424.424,0,0,1-.037-.148.238.238,0,0,1,.242-.224.248.248,0,0,1,.241.2l1.373,4,1.374-4.018a.229.229,0,0,1,.223-.178h.018a.234.234,0,0,1,.233.178l1.373,4.018,1.383-4.018a.231.231,0,0,1,.455.037.425.425,0,0,1-.037.157l-1.55,4.261a.273.273,0,0,1-.251.2h-.018a.263.263,0,0,1-.251-.214L66.81,747.4l-1.355,3.871a.263.263,0,0,1-.251.214h-.018a.274.274,0,0,1-.251-.2" transform="translate(-36 -710.64)"/><path class="cls-4" d="M74.827,749.076v-.019a2.446,2.446,0,0,1,2.441-2.478,2.42,2.42,0,0,1,2.423,2.459v.019a2.447,2.447,0,0,1-2.441,2.479,2.421,2.421,0,0,1-2.423-2.46m4.372,0v-.019a1.985,1.985,0,0,0-1.949-2.052,1.955,1.955,0,0,0-1.932,2.033v.019a1.985,1.985,0,0,0,1.95,2.051,1.953,1.953,0,0,0,1.931-2.032" transform="translate(-36 -710.64)"/><path class="cls-4" d="M84.811,746.885a.228.228,0,1,1,.455,0v1.151a2.252,2.252,0,0,1,1.9-1.42.242.242,0,0,1,.241.251.247.247,0,0,1-.241.25,2.129,2.129,0,0,0-1.9,2.367v1.746a.221.221,0,0,1-.223.231.224.224,0,0,1-.232-.231Z" transform="translate(-36 -710.64)"/><path class="cls-4" d="M92.241,744.843a.222.222,0,0,1,.223-.232.23.23,0,0,1,.232.232v4.883l2.9-3.008a.2.2,0,0,1,.158-.065.21.21,0,0,1,.213.214.19.19,0,0,1-.074.157l-1.736,1.764,1.857,2.293a.237.237,0,0,1,.065.167.207.207,0,0,1-.222.214.232.232,0,0,1-.2-.1l-1.819-2.247L92.7,750.274v.956a.217.217,0,0,1-.223.232.224.224,0,0,1-.232-.232Z" transform="translate(-36 -710.64)"/><path class="cls-4" d="M100.851,750.9a.246.246,0,0,1-.084-.176.227.227,0,0,1,.223-.223.258.258,0,0,1,.149.046,2.653,2.653,0,0,0,1.578.539c.64,0,1.142-.353,1.142-.9v-.018c0-.557-.594-.761-1.254-.947-.77-.223-1.624-.455-1.624-1.3v-.02a1.391,1.391,0,0,1,1.559-1.308,3.232,3.232,0,0,1,1.532.426.251.251,0,0,1,.121.2.226.226,0,0,1-.223.222.24.24,0,0,1-.131-.036,2.619,2.619,0,0,0-1.317-.391c-.65,0-1.077.354-1.077.827v.018c0,.53.64.725,1.318.919.761.214,1.559.493,1.559,1.328v.019a1.468,1.468,0,0,1-1.633,1.383,3.254,3.254,0,0,1-1.838-.613" transform="translate(-36 -710.64)"/><path class="cls-4" d="M105.8,746.2a1.185,1.185,0,1,1,1.185,1.184A1.182,1.182,0,0,1,105.8,746.2m2.057,0a.873.873,0,1,0-.872.9.856.856,0,0,0,.872-.9m-.284.643h-.31l-.284-.54h-.213v.54H106.5v-1.278h.619c.334,0,.5.09.5.391,0,.237-.125.331-.35.347Zm-.454-.731c.144,0,.243-.031.243-.191s-.184-.159-.305-.159h-.291v.35Z" transform="translate(-36 -710.64)"/></g></svg>

How to test that it is improperly rendered:

const sharp = require('sharp');
sharp('fixtures/avi.input.svg').png().toFile('1.png');

The output file is completely blank. The expected output is an “AVI” text.

cc @dankohn1

[lovell]

Hello, it looks like librsvg might be having problems with the transform property of the clipPath element. Removing the transform and setting its x and y properties to zero works.

-  <clipPath id="clip-path" transform="translate(-36 -710.64)">
-    <rect class="cls-1" x="36" y="710.64" width="72.171" height="40.896"/>
+  <clipPath id="clip-path">
+    <rect class="cls-1" x="0" y="0" width="72.171" height="40.896"/>
   </clipPath>

The next step is to try to reproduce this using the rsvg-convert command line tool from the latest version of librsvg.

[lovell]

Closing as there’s nothing sharp or libvips can do. Please report this upstream at librsvg if it continues to be a problem.