0

I am using SVG graphics to create images for an app I'm working on. As an example I will use one of my simplest images.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" width="100%" height="100%" viewBox="0 0 270 50" 
    preserveAspectRatio="xMaxYMax meet">
    <path d="M 25 0 l 220 0 a 25 25 0 0 1 0 50 l -220 0 a 25 25 0 0 1 0 -50"
        stroke="none" fill="blue"/>
    <text text-anchor="middle" x="50%" y="35" font-size="30" fill="white"
        font-family="Montserrat">Login</text>
</svg>

When I finish these images, I use rsvg-convert to create the necessary size images I need for an iOS application. So to generate the 1x, 2x, and 3x sizes I run

rsvg-convert -w 500 login.svg > login-1x.png
rsvg-convert -w 1000 login.svg > login-2x.png
rsvg-convert -w 1500 login.svg > login-3x.png

I have been led to believe that setting preserveAspectRatio="xMaxYMax meet" should cause my viewBox to scale up to the size of my viewport. However when I implement this I get the following results.

login-1x.png

login-1x.png

login-2x.png

login-2x.png

login-3x.png

login-3x.png

You can see there is no scaling go on at all. In fact if I add

<rect width="100%" height="100%" x="0" y="0" fill="none" stroke="white"/>

To see an outline of a 100% by 100% rectangle, I get this.

100% by 100% outline

white outline showing

So it's obvious to me that for some reason rsvg-convert is somehow interpreting 100% to be 100% of the viewBox and not the viewport. What am I doing wrong?

Community
  • 1
  • 1
William Rosenbloom
  • 2,506
  • 1
  • 14
  • 37
  • 1
    Your SVGs look fine. It may be that rsvg does not properly support viewBoxes. Perhaps post a bug on their bugtracker. – Paul LeBeau Mar 13 '16 at 04:59
  • I agree with @Paul_LeBeau .. here is your svg on codepen at 50% width and height, and your svg code from above, still maintains its `preserveAspectRatio` .. https://codepen.io/jonathan/pen/BKQOwP – Jonathan Marzullo Mar 15 '16 at 19:41
  • @PaulLeBeau Hmmm ok that's weird I was under the impression that librsvg was **the** SVG parsing library...but I guess everything's fallible. Thanks for letting me know. – William Rosenbloom Mar 16 '16 at 14:04
  • rsvg/librsvg is just Gnome's SVG parsing library. It seems quite mature, but I don't use it, so I don't know how complete or thorough its implementation of the SVG specification is. – Paul LeBeau Mar 16 '16 at 14:55
  • @PaulLeBeau Is there another implementation that you might recommend for someone working on POSIX systems? – William Rosenbloom Mar 16 '16 at 14:57
  • Apache Batik https://xmlgraphics.apache.org/batik/tools/rasterizer.html – Paul LeBeau Mar 16 '16 at 15:06

0 Answers0