SVGKit 2013 – Usage<\/a>.<\/p>\nRecipes<\/h3>\nLoad an SVG file like loading a PNG file<\/h4>\n
[objc]
\nSVGKImage* newImage = [SVGKImage imageNamed:@"imagename"];
\n[\/objc]<\/p>\n
Display an SVG file on-screen using an ImageView<\/h4>\n
[objc]
\n[self.view addSubView: [[SVGKFastImageView alloc] initWithImage:newImage];
\n[\/objc]<\/p>\n
…or an ImageView that supports CoreAnimation for every element<\/h4>\n
NB: the “Fast” imageview above saves everything as a single layer. Good for rendering, but bad for interaction. The “Layered” imageview here allows you to tap on any layer, rotate\/animate\/fade\/drop-shadow\/glow any element, etc.<\/p>\n
[objc]
\n[self.view addSubView: [[SVGKLayeredImageView alloc] initWithImage:newImage];
\n[\/objc]<\/p>\n
Use a URL to load an SVG (open an SVG file *directly* from the web)<\/h4>\n
[objc]
\n\/\/ Splitting URL to multiple lines to make blogpost
\n\/\/ easier to read…
\nNSString* longURL = [NSString stringWithFormat:@"%@%@%@",
\n@"http:\/\/upload.wikimedia.org\/",
\n@"wikipedia\/commons\/f\/fd\/",
\n@"Ghostscript_Tiger.svg";
\nNSURL* url = [NSURL urlWithString:longURL];
\nSVGKImage* newImage = [SVGKImage imageWithContentsOfURL:url];
\n[\/objc]<\/p>\n
Open an SVG from a custom source (maybe an in-memory SVG creation method)<\/h4>\n
First, create a class that conforms to SVGKSourceReader, i.e.:<\/p>\n
[objc]
\n@interface MyNewClass : NSObject <SVGKSourceReader>
\n…
\n[\/objc]<\/p>\n
…then subclass SVGKSource, and over-ride the method:<\/p>\n
[objc]
\n-(NSObject<SVGKSourceReader>*) newReader:(NSError**) error
\n[\/objc]<\/p>\n
Finally, use your customized SVGKSource to load your SVG:<\/p>\n
[objc]
\nSVGKSource* myCustomSource = [[[MyCustomClass alloc] init] newReader:nil];<\/p>\n
\/** Other examples, using the default SVGKSource class:
\nSVGKSource* urlSource = [SVGKSource sourceFromURL: [NSURL …];
\nSVGKSource* fileSource = [SVGKSource sourceFromFilename: @"monkey.svg"];
\n*\/<\/p>\n
SVGKImage* newImage = [SVGKImage imageWithSource:myCustomSource];
\n[\/objc]<\/p>\n
Search an SVG file for particular tags \/ nodes \/ elements<\/h4>\n
SVG is an XML file, containing XML tags\/nodes such as: “<svg>”, “<g>”, “<path>”, “<linearGradient>”, etc.<\/p>\n
[objc]
\nNSString* tagToFind = @"linearGradient";
\nNodeList* result = [svgImage.DOMDocument getElementsByTagName:tagToFind];<\/p>\n
for( Element* domElement in result )
\n{
\n \/\/ You can use the Element object directly:
\n domElement.tagName;
\n …<\/p>\n
\/\/ …or, if it was parsed by the SVG parser, you can convert it to an SVGElement:
\n SVGElement* svgElement = (SVGElement*) domElement;
\n …
\n}
\n[\/objc]<\/p>\n
Search for sub-tags \/ sub-nodes of a particular tag\/node<\/h4>\n
If you already have an SVGElement reference, you can search all its descendants:<\/p>\n
[objc]
\n\/\/ To search the entire document, use:<\/p>\n
\/\/ SVGElement* startPoint = newImage.DOMTree;
\nSVGElement* startPoint = … \/\/ from your code<\/p>\n
NSString* tagToFind = @"linearGradient";
\nNodeList* result = [startPoint getElementsByTagName:tagToFind];<\/p>\n
for( Element* domElement in result )
\n{
\n SVGElement* svgElement = (SVGElement*) domElement; \/\/ if your tags are all supported by SVGKit, they will be converted to SVGElement instances
\n …
\n}
\n[\/objc]<\/p>\n
Get a list of ALL descendant tags (from a particular node down)<\/h4>\n
[objc]
\nSVGElement* startPoint = … \/\/ e.g. for whole SVG doc, use: newImage.DOMDocument;
\nNodeList* allElements = [startPoint getElementsByTagName:@"*"];
\n[\/objc]<\/p>\n
Render one small part of the SVG file on its own<\/h4>\n
E.g. if you want to display a subset of the SVG, or want to export a single element:
\n[objc]
\nNSString* idInSVGFile = … \/\/ assuming your SVG file has an "id" attribute for this node
\nCALayer* absoluteLayer = [newImage newCopyPositionedAbsoluteLayerWithIdentifier:isInSVGFile];<\/p>\n
…<\/p>\n
\/\/ NB: "absoluteLayer" is now positioned in absolute space;
\n\/\/ if you add it to your window using e.g.:
\n[self.view.layer addSublayer: absoluteLayer];
\n\/\/ …it will appear in the same place as it appeared before,
\n\/\/ keeping all the offsets, rotations, etc
\n[\/objc]<\/p>\n
NOTE: there are several “newCopy…” methods, and each has different effects and outcomes. Read the method docs for each to decide which one you want to use. In a future version of SVGKit, we’d like to move these methods into a class of their own, and make it easier to see which one does what<\/span><\/p>\nCustomise the parsing, using your own parser extensions<\/h4>\n
Create your custom class that adheres to SVGKParserExtension:
\n[objc]
\n@interface MyCustomSVGParserExtension : NSObject <SVGKParserExtension>
\n…
\n[\/objc]
\nThen create a parser, INCLUDE THE DEFAULT extensions, and add your one on the end:
\n[objc]
\nMyCustomSVGParserExtension* myCustomExtension = [[MyCustomSVGParserExtension alloc] init];<\/p>\n
SVGKParser* parser = [[SVGKParser alloc] init];
\n[parser addDefaultSVGParserExtensions]; \/\/ HIGHLY RECOMMENDED
\n[parser addParserExtension:myCustomExtension];<\/p>\n
SVGKParseResult* result = [parser parseSynchronously];<\/p>\n
SVGKImage* newImage = [[SVGKImage alloc] initWithParsedSVG:result];
\n[\/objc]<\/p>\n
Get help on why parsing failed (and warnings and line numbers!)<\/h4>\n
[objc]
\nSVGKImage* newImage = … \/\/ use methods above<\/p>\n
\/\/ EITHER: parse using default parser:
\nSVGKParseResult* parseResult1 = newImage.parseErrorsAndWarnings; \/\/ this is a convenience pointer to (SVGKParser*).currentParseRun<\/p>\n
\/\/ OR: use a custom parser:
\nSVGKParser* parser = … \/\/ use methods above
\nSVGKParseResult* parseResult2 = parser.currentParseRun;
\n[\/objc]<\/p>\n
And then you have the following info:
\n[objc]
\n\/* array of NSError objects, each one a "WARNING" from the parser *\/
\nparseResult.warnings;<\/p>\n
\/* array of NSError objects, each one a "FATAL ERROR" from the parser – if your SVG didn’t render at all, this is why! *\/
\nparseResult.errorsFatal;<\/p>\n
\/* array of NSError objects, each one a "RECOVERABLE ERROR" from the parser – if your SVG didn’t render correctly, this is why! (although you probably still got to see something) *\/
\nparseResult.errorsRecoverable;
\n[\/objc]<\/p>\n
UPDATE: more Recipes!<\/h2>\n
For more recipes, see SVGKit Recipes part 2<\/a><\/p>\n(this covers answers to some of the common questions asked in the Comments below)<\/p>\n","protected":false},"excerpt":{"rendered":"
SVG is an awesome image format thats widely used, works in all browsers. SVG graphics make better apps and better games – and automatically “upgrade” themselves for future devices. This post gives some simple 1-line \/ few lines of code recipes for using some of the main features of SVGKit \u2013 SVG implementation for iOS\/OS […]<\/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\/2142"}],"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=2142"}],"version-history":[{"count":6,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/posts\/2142\/revisions"}],"predecessor-version":[{"id":3053,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/posts\/2142\/revisions\/3053"}],"wp:attachment":[{"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/media?parent=2142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/categories?post=2142"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/new.t-machine.org\/index.php\/wp-json\/wp\/v2\/tags?post=2142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}