Giter VIP home page Giter VIP logo

sdwebimagesvgcoder's Introduction

SDWebImageSVGCoder

CI Status Version License Platform Carthage compatible

What's for

SDWebImageSVGCoder is a SVG coder plugin for SDWebImage framework, which provide the image loading support for SVG.

The SVG rendering is done using Apple's framework CoreSVG.framework (introduced in iOS 13/macOS 10.15).

Note for SVGKit user

Previously before 1.0.0 version, this SVG Coder is powered by third party library SVGKit. Which support iOS 8+(macOS 10.10+) as well.

However, due to the lack support of that third party library, which contains massive issues without community's help, no clarity of version release, makes a pain for us to maintain. So, We decide to deprecate SVGKit support and move it into another repo: SDWebImageSVGKitPlugin.

User who use SVGKit or have to support iOS 8+(macOS 10.10+) can still use that SDWebImageSVGKitPlugin instead. You can also mix these two SVG coders at the same time. But since Apple already provide a built-in framework support, we prefer to use that instead, which can reduce complicated dependency, code size, and get polished from Apple's system upgrade.

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

You can modify the code or use some other SVG files to check the compatibility.

Requirements

  • iOS 13+
  • tvOS 13+
  • macOS 10.15+
  • watchOS 6+

Installation

CocoaPods

SDWebImageSVGCoder is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'SDWebImageSVGCoder'

Carthage

SDWebImageSVGCoder is available through Carthage.

github "SDWebImage/SDWebImageSVGCoder"

Swift Package Manager

SDWebImageSVGCoder is available through Swift Package Manager.

let package = Package(
    dependencies: [
        .package(url: "https://github.com/SDWebImage/SDWebImageSVGCoder.git", from: "1.0")
    ]
)

Usage

Render SVG as vector image

To use SVG coder, you should firstly add the SDImageSVGCoder to the coders manager. Then you can call the View Category method to start load SVG images. See Wiki - Coder Usage here for these steps.

Note SVG is a vector image format, and UIImageView/NSImageView support rendering vector image as well. Which means you can change the size without losing any details.

  • Objective-C
// register coder, on AppDelegate
SDImageSVGCoder *SVGCoder = [SDImageSVGCoder sharedCoder];
[[SDImageCodersManager sharedManager] addCoder:SVGCoder];
// load SVG url
UIImageView *imageView;
[imageView sd_setImageWithURL:url]
// Changing size
CGRect rect = imageView.frame;
rect.size.width = 200;
rect.size.height = 200;
imageView.frame = rect;
  • Swift
// register coder, on AppDelegate
let SVGCoder = SDImageSVGCoder.shared
SDImageCodersManager.shared.addCoder(SVGCoder)
// load SVG url
let imageView: UIImageView
imageView.sd_setImage(with: url)
// Changing size
var rect = imageView.frame
rect.size.width = 200
rect.size.height = 200
imageView.frame = rect

Note since UIImageView/NSImageView support this vector rendering, it means this coder plugin can be compatible for SwiftUI. Check SDWebImageSwiftUI for usage.

Render SVG as bitmap image

In most cases, vector SVG is preferred. But however, sometimes you may want the bitmap form of SVG, used for image processing. You can use .svgPrefersBitmap to provide the bitmap format as well.

By default it use the SVG canvas size. You can also specify a desired size during image loading using .svgImageSize context option. And you can specify whether or not to keep aspect ratio during scale using .svgImagePreserveAspectRatio context option.

  • Objective-C
UIImageView *imageView;
CGSize SVGImageSize = CGSizeMake(500, 500);
[imageView sd_setImageWithURL:url placeholderImage:nil options:0 context:@{SDWebImageContextSVGPrefersBitmap: @YES, SDWebImageContextSVGImageSize: @(SVGImageSize)];
  • Swift
let imageView: UIImageView
let SVGImageSize = CGSize(width: 500, height: 500)
imageView.sd_setImage(with: url, placeholderImage: nil, options: [], context: [.svgPrefersBitmap : true, .svgImageSize : SVGImageSize])

Export SVG data

SDWebImageSVGCoder provide an easy way to export the SVG image generated by this coder plugin, to the original SVG data.

Note: The bitmap form of SVG does not support SVG data export.

  • Objective-C
UIImage *image = imageView.image; // Image generated by this coder plugin
NSData *imageData = [image sd_imageDataAsFormat:SDImageFormatSVG];
  • Swift
let image = imageView.image // Image generated by this coder plugin 
let imageData = image.sd_imageData(as: .SVG)

Screenshot

These SVG images are from wikimedia, you can try the demo with your own SVG image as well.

Author

DreamPiggy

License

SDWebImageSVGCoder is available under the MIT license. See the LICENSE file for more info.

sdwebimagesvgcoder's People

Contributors

dreampiggy avatar qclmnt avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.