Search code examples
svgimagemagickrmagick

Fill rectangle using image -- works in browser but not with imagemagick convert

Using SVG, I need to fill a rectangle with either an image or a gradient depending on user choices made at runtime. I have the gradient fill working well, it's the image fill I am having issues with.

Here on SO, and on the web at large, I have found that to fill a rect using an image, I have to use a pattern. So I implemented this: 

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="107.25"
   height="237.0"
   viewBox="0 0 80 190"
   id="svg2"
   version="1.1"
   style="display:inline">
  <defs id="defs4">
    <pattern id='glassbkg' patternUnits='objectBoundingBox' width='100%' height='100%'>
       <image xlink:href='http://glass.snowmoonsoftware.com/system/door_glasses/photos/1/original_21x65.png' height='100%' width='100%' preserveAspectRatio='none' />
    </pattern>
  </defs>
  <g id="layer1" transform="translate(0,-862.36218)">
    <rect
       style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.99999988;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;st\
roke-dasharray:none"
       id="rect2987"
       width="79"
       height="189.00005"
       x="0.50000006"
       y="862.86218" />
  </g>
  <g id="layer3" style="display:inline">
    <rect
       style="fill:none;stroke:#808080;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="rect3800"
       width="51"
       height="155"
       x="14.5"
       y="14.5" />
    <rect
       style="fill:url(#glassbkg);fill-opacity:1;stroke:#808080;stroke-width:1;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:non\
e"
       id="rect3800-3"
       width="47"
       height="151"
       x="16.5"
       y="16.5" />
  </g>
</svg>

and tested by rendering the svg in the browser and all is good:

Good render - screenshot

Next I render the svg using Imagemagick but the fill isn't scaled, it's tiled.

Hmm, that's odd. Let's see if it's imagemagick proper or my drawing code.

convert image_33.svg image_png tiled background

How can I get the pattern to scale, not repeat? Is this a deficiency in imagemagick?

Using: convert --version Version: ImageMagick 6.7.9-10 2013-08-29 Q16 http://www.imagemagick.org Copyright: Copyright (C) 1999-2012 ImageMagick Studio LLC Features: OpenMP

Solution

  • Installing and building a newer version of ImageMagick fixed this issue, however I was unable to get to render properly using RMagick. I had to use convert.

    The proper incantation to build with rsvg delegate was, for me: ./configure --with-librsvg --with-svg --with-modules -enable-delegate-build --prefix=/usr

    Version: ImageMagick 6.9.2-1 Q16 x86_64 2015-09-21 http://www.imagemagick.org Copyright: Copyright (C) 1999-2015 ImageMagick Studio LLC License: http://www.imagemagick.org/script/license.php Features: Cipher DPC Modules OpenMP Delegates (built-in): bzlib djvu fontconfig freetype gvc jbig jng jpeg lcms lqr ltdl lzma openexr png tiff wmf x xml zlib