{"id":2267,"date":"2018-08-23T02:26:14","date_gmt":"2018-08-23T06:26:14","guid":{"rendered":"http:\/\/www.rexfeng.com\/blog\/?p=2267"},"modified":"2018-08-23T02:26:14","modified_gmt":"2018-08-23T06:26:14","slug":"using-svg-pdf-assets-in-your-ios-app","status":"publish","type":"post","link":"https:\/\/www.rexfeng.com\/blog\/2018\/08\/using-svg-pdf-assets-in-your-ios-app\/","title":{"rendered":"Using SVG \/ PDF assets in your iOS app"},"content":{"rendered":"

This guide covers a simple way to use SVG (Scalable Vector Graphics) assets in your iOS app. This was tested on\u00a0macOS High Sierra 10.13 with\u00a0Xcode 9.4 and Swift 4.<\/p>\n

There are many websites where you can find SVG icons. Check out Material<\/a> or\u00a0ionicons<\/a><\/p>\n

    \n
  1. Install homebrew & python3 for macOS (if you don’t have it)<\/li>\n
  2. Install\u00a0cairosvg<\/a>. The code below installs various dependencies\n
    brew install python3 cairo pango gdk-pixbuf libffi\r\n\r\npip3 install cairosvg<\/pre>\n<\/li>\n
  3. Convert your SVG icons to PDF files. Make sure to navigate to the location of your SVG icon files. Run this command for each icon file (with the relevant *.svg & *.pdf input \/ output file name):\n
    cairosvg icon.svg -o icon.pdf<\/pre>\n<\/li>\n
  4. Drag your PDF files into your Xcode Assets.xcassets folder<\/li>\n
  5. Adjust the settings for each icon in your xcassets. You may want to adjust:\n
      \n
    1. Name – this is important as you will refer to this in your Swift code to use the icon<\/li>\n
    2. Set ‘Render As’ to ‘Template Image’<\/li>\n
    3. Check the box for ‘Resizing – Preserve Vector Data’<\/li>\n
    4. Set ‘Scales’ to ‘Single Scale’<\/li>\n<\/ol>\n<\/li>\n
    5. Use your icon in your app. I did this\u00a0programmatically in Swift, and this works in your ViewController. Make sure to update the ‘iconName’ to match what is in your xcassets for your icon file.\n
      if let icon = UIImage(named: \"iconName\") {\r\n    let image = UIImageView(image: icon)\r\n    image.translatesAutoresizingMaskIntoConstraints = false\r\n    image.tintColor = UIColor.blue\r\n    view.addSubview(image)\r\n\r\n    NSLayoutConstraint.activate([\r\n        image.leadingAnchor.constraint(equalTo: view.leadingAnchor),\r\n        image.centerYAnchor.constraint(equalTo: view.centerYAnchor),\r\n        image.widthAnchor.constraint(equalToConstant: 24),\r\n        image.heightAnchor.constraint(equalToConstant: 24),\r\n        ])\r\n}<\/pre>\n<\/li>\n
    6. \u00a0That’s it. Your SVG file was converted to a PDF file, added into your Xcode assets, and called from your ViewController!<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
      This guide covers a simple way to use SVG (Scalable Vector Graphics) assets in your iOS app. This was tested on\u00a0macOS High Sierra 10.13 with\u00a0Xcode 9.4 and Swift 4. There are many websites where you can find SVG icons. Check out Material or\u00a0ionicons Install homebrew & python3 for macOS (if you don’t have it) Install\u00a0cairosvg. […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1029],"tags":[1404,1406,1403,966,1405,1402,1408,1407,1401,1174,1086],"class_list":["post-2267","post","type-post","status-publish","format-standard","hentry","category-programming","tag-cairosvg","tag-homebrew","tag-icons","tag-ios","tag-macos","tag-pdf","tag-pip3","tag-python","tag-svg","tag-swift","tag-xcode"],"_links":{"self":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/2267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/comments?post=2267"}],"version-history":[{"count":4,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/2267\/revisions"}],"predecessor-version":[{"id":2271,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/2267\/revisions\/2271"}],"wp:attachment":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/media?parent=2267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/categories?post=2267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/tags?post=2267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}