SVGKit: scaling SVG images

This is very easy, but lots of people find this difficult with good reason!

Here’s a quick guide to how image-scaling is implemented with SVGKit, so you can effortlessly scale your images.

REQUIRED

For any of these techniques to work, we need to know the size of your incoming SVG. According to the spec, EVERY SVG file is supposed to have a size, but it is POSSIBLE for an SVG to be saved “without a size”.

This is rare, but it does happen.

In that specific case, we CANNOT do some of the things below (the exception is “scale” — we can do this, using a one-liner built-in to SVGKit, but it would be safer for you to fix your SVG file!).

In particular, we definitely CANNOT scale to fit – because your SVG is infinite. You need to edit the SVG file and set the “width” attribute on the root <svg> tag, or you need to set the “viewBox” attribute (on the same tag).

Use 1: Scale-to-fit

All you have to do is provide a specific size for your SVGKImage, after it’s finished parsing. It will do the rest for you automatically:

SVGKImage im = [SVGKImage imageNamed:"myImage"];
im.size = CGSizeMake( 320, 480 ); // fill an iOS screen
SVGKImageView* iv = [[SVGKFastImageView alloc] initWithSVGKImage: im];

[self.view addSubview: iv];

Use 2: Make it half the size

In this case, you need to specify a size “half as big as the default”.

All you have to do is provide a specific size for your SVGKImage, after it’s finished parsing. It will do the rest for you automatically:

SVGKImage im = [SVGKImage imageNamed:"myImage"];
CGSize originalSize = im.size; // this defaults to the SVG's internal size
float half = 1.0 / 2.0f;
im.size = CGSizeApplyAffineTransform( im.size, CGAffineTransformMakeScale( half, half ));
SVGKImageView* iv = [[SVGKFastImageView alloc] initWithSVGKImage: im];

[self.view addSubview: iv];

Use 3: Make it half the size – when the SVG is infinite

If the SVG is infinite, we can’t make the image half as big – but we can RENDER it half as big. In this case, it’ll be up to you to “guesstimate” what .frame to place on the SVGKImageView at the end – or set it to the biggest size you care about rendering?

SVGKImage im = [SVGKImage imageNamed:"myImage"];
im.scale = 0.5f; // NB: this will BE REJECTED if your SVG is non-infinite; 
// ... use the other techniques (listed above) instead!
SVGKImageView* iv = [[SVGKFastImageView alloc] initWithSVGKImage: im];

[self.view addSubview: iv];

4 thoughts on “SVGKit: scaling SVG images

  1. Chris H

    Grateful as I am for your work on SVGKit; it seems – frustratingly – not to support the most common use case! The whole reason I would prefer to use Vector in my App is for the ability to dynamically scale to different screen sizes. The problem is, SVGKit seems to want to know a specific size to render to, then the view only renders to that size, seemingly overriding any Auto-Layout. I am about to have a delve into the SVGKit code to try and change this, but I’m really suprised to find that it works this inflexibly out-the-box(?) :-/

  2. adam Post author

    It predates AutoLayout by years. There is tonnes of code that handles scaling the render output correctly to fit the space its rendering into.

    The main problem is the large number of incomplete SVG files out there (those with no viewBox etc).

    The “specific size” is only needed – and, off the top of my head, only used! – when you try to change the image size by scalng it in code; SVGKit needs to know what size you’re changing from, in order to calculate a scale-factor.

    There is example code both in SVGK*ImageView classes and in the Demo viewer.

  3. adam Post author

    I haven’t noticed any patches related to AutoLayout – Apple shipped that tech as so badly broken that most devs refused to use it until very recently (certainly it was still broken all through iOS7! Years after it launched).

    Assuming AL now works well (I wouldn’t know; none of the projects I’ve worked on recently have used it – they all had legacy codebases) then it would be great if you take a look and figure out what needs updating/adding/etc to make SVGKit play nicely with it.

  4. Brian

    I think that SVGKit works as expected with AutoLayout. The image view has an intrinsic content size which matches the size specified in the SVG. In order to get the image to scale well without fighting other constraints, I just had to lower the compression resistance and content hugging priorities of the SVGK image view.

Leave a Reply

Your email address will not be published. Required fields are marked *