{"id":2318,"date":"2013-04-14T01:10:03","date_gmt":"2013-04-14T00:10:03","guid":{"rendered":"http:\/\/t-machine.org\/?p=2318"},"modified":"2013-04-14T01:31:13","modified_gmt":"2013-04-14T00:31:13","slug":"svgkit-scaling-svg-images","status":"publish","type":"post","link":"http:\/\/new.t-machine.org\/index.php\/2013\/04\/14\/svgkit-scaling-svg-images\/","title":{"rendered":"SVGKit: scaling SVG images"},"content":{"rendered":"

This is very easy, but lots of people find this difficult with good reason<\/a>!<\/p>\n

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

<\/p>\n

REQUIRED<\/h3>\n

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”.<\/p>\n

This is rare, but it does happen.<\/p>\n

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!).<\/p>\n

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).<\/p>\n

Use 1: Scale-to-fit<\/h3>\n

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:<\/p>\n

[objc]
\nSVGKImage im = [SVGKImage imageNamed:"myImage"];
\nim.size = CGSizeMake( 320, 480 ); \/\/ fill an iOS screen
\nSVGKImageView* iv = [[SVGKFastImageView alloc] initWithSVGKImage: im];<\/p>\n

[self.view addSubview: iv];
\n[\/objc]<\/p>\n

Use 2: Make it half the size<\/h3>\n

In this case, you need to specify a size “half as big as the default”.<\/p>\n

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:<\/p>\n

[objc]
\nSVGKImage im = [SVGKImage imageNamed:"myImage"];
\nCGSize originalSize = im.size; \/\/ this defaults to the SVG’s internal size
\nfloat half = 1.0 \/ 2.0f;
\nim.size = CGSizeApplyAffineTransform( im.size, CGAffineTransformMakeScale( half, half ));
\nSVGKImageView* iv = [[SVGKFastImageView alloc] initWithSVGKImage: im];<\/p>\n

[self.view addSubview: iv];
\n[\/objc]<\/p>\n

Use 3: Make it half the size – when the SVG is infinite<\/h3>\n

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?<\/p>\n

[objc]
\nSVGKImage im = [SVGKImage imageNamed:"myImage"];
\nim.scale = 0.5f; \/\/ NB: this will BE REJECTED if your SVG is non-infinite;
\n\/\/ … use the other techniques (listed above) instead!
\nSVGKImageView* iv = [[SVGKFastImageView alloc] initWithSVGKImage: im];<\/p>\n

[self.view addSubview: iv];
\n[\/objc]<\/p>\n","protected":false},"excerpt":{"rendered":"

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.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"_links":{"self":[{"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/posts\/2318"}],"collection":[{"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/comments?post=2318"}],"version-history":[{"count":4,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/posts\/2318\/revisions"}],"predecessor-version":[{"id":2323,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/posts\/2318\/revisions\/2323"}],"wp:attachment":[{"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/media?parent=2318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/categories?post=2318"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/tags?post=2318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}