Merge pull request SVGKit#586 from dreampiggy/bugfix_gradient_test_case

Fix the some gradient rendering edge case in W3C

Author: adamgit

Demo-Samples/Fonts/Blocky.ttf

@@ -7,6 +7,7 @@
 objects = {
 
 /* Begin PBXBuildFile section */
+3242C36E217CF0CD0013765F /* Blocky.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3242C368217CF0CD0013765F /* Blocky.ttf */; };
 32D3D5EC2176E3FA00ED20D8 /* Mozilla_Firefox_logo_2013.svg in Resources */ = {isa = PBXBuildFile; fileRef = 32D3D5E62176E3FA00ED20D8 /* Mozilla_Firefox_logo_2013.svg */; };
 32D3D5F12176FA0700ED20D8 /* Mozilla_Firefox_logo_2013.png in Resources */ = {isa = PBXBuildFile; fileRef = 32D3D5F02176FA0700ED20D8 /* Mozilla_Firefox_logo_2013.png */; };
 32D42245217AED3900CFD064 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 32D42244217AED3900CFD064 /* LaunchScreen.storyboard */; };
@@ -250,6 +251,7 @@
 /* End PBXCopyFilesBuildPhase section */
 
 /* Begin PBXFileReference section */
+3242C368217CF0CD0013765F /* Blocky.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; path = Blocky.ttf; sourceTree = "<group>"; };
 32D3D5E62176E3FA00ED20D8 /* Mozilla_Firefox_logo_2013.svg */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = Mozilla_Firefox_logo_2013.svg; sourceTree = "<group>"; };
 32D3D5F02176FA0700ED20D8 /* Mozilla_Firefox_logo_2013.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = Mozilla_Firefox_logo_2013.png; sourceTree = "<group>"; };
 32D42244217AED3900CFD064 /* LaunchScreen.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = LaunchScreen.storyboard; sourceTree = "<group>"; };
@@ -438,6 +440,14 @@
 /* End PBXFrameworksBuildPhase section */
 
 /* Begin PBXGroup section */
+3242C367217CF0CD0013765F /* Fonts */ = {
+isa = PBXGroup;
+children = (
+3242C368217CF0CD0013765F /* Blocky.ttf */,
+);
+path = Fonts;
+sourceTree = "<group>";
+};
 661A0DBF161727CF008D5FBE = {
 isa = PBXGroup;
 children = (
@@ -641,6 +651,7 @@
 662712631AD97D7500B3AD03 /* W3C_SVG_11_TestSuite */,
 661EEA511ACC1723007176B0 /* Saved Bitmaps */,
 66E8627B1688BA510059C9C4 /* SVG */,
+3242C367217CF0CD0013765F /* Fonts */,
 661EEA421ACC04F2007176B0 /* Licenses.plist */,
 );
 path = "Demo-Samples";
@@ -849,6 +860,7 @@
 66E862921688BA510059C9C4 /* Blank_Map-Africa.svg in Resources */,
 661EEAA71ACC3053007176B0 /* transformations.png in Resources */,
 661EEAE41ACC3444007176B0 /* sakamura-default-fill-opacity-test.png in Resources */,
+3242C36E217CF0CD0013765F /* Blocky.ttf in Resources */,
 661EEA991ACC2FD4007176B0 /* PreserveAspectRatio.png in Resources */,
 66E862931688BA510059C9C4 /* breaking-1.svg in Resources */,
 661EEA861ACC2FBB007176B0 /* text01.svg in Resources */,

Demo-iOS.xcodeproj/project.pbxproj

@@ -24,6 +24,10 @@
 <string>1.0</string>
 <key>LSRequiresIPhoneOS</key>
 <true/>
+<key>UIAppFonts</key>
+<array>
+<string>Blocky.ttf</string>
+</array>
 <key>UILaunchStoryboardName</key>
 <string>LaunchScreen</string>
 <key>UIMainStoryboardFile</key>

SVGKitLibrary/Demo-iOS/Demo-iOS-Info.plist

@@ -16,8 +16,6 @@
 #import "SVGKImage+CGContext.h"
 #include <tgmath.h>
 
-#define TEMPORARY_WARNING_FOR_APPLES_BROKEN_RENDERINCONTEXT_METHOD 1 // ONLY needed as temporary workaround for Apple's renderInContext bug breaking various bits of rendering: Gradients, Scaling, etc
-
 @interface SVGKImageRep ()
 @property (nonatomic, strong, readwrite, setter = setTheSVG:) SVGKImage *image;
 @property (nonatomic, assign) BOOL antiAlias;
@@ -150,25 +148,6 @@ - (instancetype)initWithSVGImage:(SVGKImage*)theImage copy:(BOOL)copyImage
 }
 
 self.image = theImage;
- 
-#if TEMPORARY_WARNING_FOR_APPLES_BROKEN_RENDERINCONTEXT_METHOD
-BOOL hasGrad = ![SVGKFastImageView svgImageHasNoGradients:self.image];
-
-if (hasGrad) {
-NSString *errstuff;
-
-if (hasGrad) {
-errstuff = @"gradients";
-}
-
-if (errstuff == nil) {
-//We shouldn't get here!
-errstuff = @"";
-}
-
-DDLogWarn(@"[%@] The image \"%@\" might have problems rendering correctly due to %@.", [self class], [self image], errstuff);
-}
-#endif
 
 if (![self.image hasSize]) {
 self.image.size = CGSizeMake(32, 32);

Source/AppKit additions/SVGKImageRep.m

@@ -15,7 +15,7 @@
 
 #define FORCE_RASTERIZE_LAYERS 0 // If True, all CALayers will be told to rasterize themselves. This MIGHT increase performance (or might not), but leads to blurriness whenever a layer is scaled / zoomed in
 #define IMPROVE_PERFORMANCE_BY_WORKING_AROUND_APPLE_FRAME_ALIGNMENT_BUG 1 // NB: Apple's code for rendering ANY CALayer is extremely slow if the layer has non-integer co-ordinates for its "frame" or "bounds" property. This flag technically makes your SVG's render incorrect at sub-pixel level, but often increases performance of Apple's rendering by a factor of 2 or more!
-
+@class SVGGradientLayer;
 @interface SVGHelperUtilities : NSObject
 
 /**
@@ -49,9 +49,13 @@ This method ONLY looks at current node to establish the above two things, to do
 +(void) configureCALayer:(CALayer*) layer usingElement:(SVGElement*) nonStylableElement;
 
 +(CALayer *) newCALayerForPathBasedSVGElement:(SVGElement*) svgElement withPath:(CGPathRef) path;
++ (SVGGradientLayer*)getGradientLayerWithId:(NSString*)gradId
+ forElement:(SVGElement*)svgElement
+ withRect:(CGRect)r
+ transform:(CGAffineTransform)transform;
 
 +(CGColorRef) parseFillForElement:(SVGElement *)svgElement;
-
++(CGColorRef) parseStrokeForElement:(SVGElement *)svgElement;
 +(void) parsePreserveAspectRatioFor:(Element<SVGFitToViewBox>*) element;
 
 @end

Source/DOM classes/SVG-DOM/SVGHelperUtilities.h

@@ -384,12 +384,8 @@ +(CALayer *) newCALayerForPathBasedSVGElement:(SVGElement<SVGTransformable>*) sv
 fakeSize = CGSizeApplyAffineTransform( fakeSize, transformAbsolute );
 strokeLayer.lineWidth = hypot(fakeSize.width, fakeSize.height)/M_SQRT2;
 
-SVGColor strokeColorAsSVGColor = SVGColorFromString([actualStroke UTF8String]); // have to use the intermediate of an SVGColor so that we can over-ride the ALPHA component in next line
-NSString* actualStrokeOpacity = [svgElement cascadedValueForStylableProperty:@"stroke-opacity"];
-if( actualStrokeOpacity.length > 0 )
-strokeColorAsSVGColor.a = (uint8_t) ([actualStrokeOpacity floatValue] * 0xFF);
-
-strokeLayer.strokeColor = CGColorWithSVGColor( strokeColorAsSVGColor );
+ NSString* actualStrokeOpacity = [svgElement cascadedValueForStylableProperty:@"stroke-opacity"];
+ strokeLayer.strokeColor = [self parseStrokeForElement:svgElement fromStroke:actualStroke andOpacity:actualStrokeOpacity];
 
  /**
  Stroke dash array
@@ -454,19 +450,32 @@ +(CALayer *) newCALayerForPathBasedSVGElement:(SVGElement<SVGTransformable>*) sv
 fillLayer.opacity = strokeLayer.opacity;
 fillLayer.path = strokeLayer.path;
 
-NSRange idKeyRange = NSMakeRange(5, actualStroke.length - 6);
-NSString* strokeId = [actualStroke substringWithRange:idKeyRange];
-
-SVGGradientLayer *gradientLayer = [self getGradientLayerWithId:strokeId forElement:svgElement withRect:strokeLayer.frame
- transform:transformAbsolute];
-
-strokeLayer.frame = localRect;
-
-strokeLayer.fillColor = nil;
-strokeLayer.strokeColor = [UIColor blackColor].CGColor;
-
-gradientLayer.mask = strokeLayer;
-strokeLayer = (CAShapeLayer*) gradientLayer;
+ NSArray *strokeArgs = [actualStroke componentsSeparatedByCharactersInSet:NSCharacterSet.whitespaceCharacterSet];
+ NSString *strokeIdArg = strokeArgs.firstObject;
+NSRange idKeyRange = NSMakeRange(5, strokeIdArg.length - 6);
+NSString* strokeId = [strokeIdArg substringWithRange:idKeyRange];
+ 
+ // SVG spec: Vertical and horizontal lines don't have a boundingbox, since they are one-dimensional, even though the stroke-width makes it look like they should have a boundingbox with non-zero width and height.
+ CGRect boundingBox = strokeLayer.frame;
+ CGRect pathBoundingBox = CGPathGetPathBoundingBox(pathRelative);
+ if (!CGRectIsEmpty(pathBoundingBox)) {
+ // apply gradient
+ SVGGradientLayer *gradientLayer = [self getGradientLayerWithId:strokeId forElement:svgElement withRect:boundingBox transform:transformAbsolute];
+ 
+ if (gradientLayer) {
+ strokeLayer.frame = localRect;
+ 
+ strokeLayer.fillColor = nil;
+ strokeLayer.strokeColor = [UIColor blackColor].CGColor;
+ 
+ gradientLayer.mask = strokeLayer;
+ strokeLayer = (CAShapeLayer*) gradientLayer;
+ } else {
+ // no gradient, fallback
+ }
+ } else {
+ // no boundingBox, fallback
+ }
 }
 
 }
@@ -488,22 +497,27 @@ +(CALayer *) newCALayerForPathBasedSVGElement:(SVGElement<SVGTransformable>*) sv
 
 if ( [actualFill hasPrefix:@"url"] )
 {
-NSRange idKeyRange = NSMakeRange(5, actualFill.length - 6);
-NSString* fillId = [actualFill substringWithRange:idKeyRange];
+ NSArray *fillArgs = [actualFill componentsSeparatedByCharactersInSet:NSCharacterSet.whitespaceCharacterSet];
+ NSString *fillIdArg = fillArgs.firstObject;
+NSRange idKeyRange = NSMakeRange(5, fillIdArg.length - 6);
+NSString* fillId = [fillIdArg substringWithRange:idKeyRange];
 
 /** Replace the return layer with a special layer using the URL fill */
 /** fetch the fill layer by URL using the DOM */
 SVGGradientLayer *gradientLayer = [self getGradientLayerWithId:fillId forElement:svgElement withRect:fillLayer.frame
  transform:transformAbsolute];
-
-CAShapeLayer* maskLayer = [CAShapeLayer layer];
-maskLayer.frame = localRect;
-maskLayer.path = fillLayer.path;
-maskLayer.fillColor = [UIColor blackColor].CGColor;
-maskLayer.strokeColor = nil;
-gradientLayer.mask = maskLayer;
-gradientLayer.frame = fillLayer.frame;
-fillLayer = (CAShapeLayer* )gradientLayer;
+ if (gradientLayer) {
+ CAShapeLayer* maskLayer = [CAShapeLayer layer];
+ maskLayer.frame = localRect;
+ maskLayer.path = fillLayer.path;
+ maskLayer.fillColor = [UIColor blackColor].CGColor;
+ maskLayer.strokeColor = nil;
+ gradientLayer.mask = maskLayer;
+ gradientLayer.frame = fillLayer.frame;
+ fillLayer = (CAShapeLayer* )gradientLayer;
+ } else {
+ // no gradient, fallback
+ }
 }
 else if( actualFill.length > 0 || actualFillOpacity.length > 0 )
 {
@@ -540,7 +554,10 @@ + (SVGGradientLayer*)getGradientLayerWithId:(NSString*)gradId
 NSAssert( svgElement.rootOfCurrentDocumentFragment != nil, @"This SVG shape has a URL fill type; it needs to search for that URL (%@) inside its nearest-ancestor <SVG> node, but the rootOfCurrentDocumentFragment reference was nil (suggests the parser failed, or the SVG file is corrupt)", gradId );
 
 SVGGradientElement* svgGradient = (SVGGradientElement*) [svgElement.rootOfCurrentDocumentFragment getElementById:gradId];
-NSAssert( svgGradient != nil, @"This SVG shape has a URL fill (%@), but could not find an XML Node with that ID inside the DOM tree (suggests the parser failed, or the SVG file is corrupt)", gradId );
+ if (svgGradient == nil) {
+ // SVG spec allows referenced gradient not exist and will use fallback color
+ SVGKitLogWarn(@"This SVG shape has a URL fill (%@), but could not find an XML Node with that ID inside the DOM tree (suggests the parser failed, or the SVG file is corrupt)", gradId );
+ }
 
 [svgGradient synthesizeProperties];
 
@@ -560,32 +577,77 @@ +(CGColorRef) parseFillForElement:(SVGElement *)svgElement
 
 +(CGColorRef) parseFillForElement:(SVGElement *)svgElement fromFill:(NSString *)actualFill andOpacity:(NSString *)actualFillOpacity
 {
-CGColorRef fillColor = nil;
-if ( [actualFill hasPrefix:@"none"])
-{
-fillColor = nil;
-}
-else if( actualFill.length > 0 || actualFillOpacity.length > 0 )
-{
-SVGColor fillColorAsSVGColor = ( actualFill.length > 0 ) ?
-SVGColorFromString([actualFill UTF8String]) // have to use the intermediate of an SVGColor so that we can over-ride the ALPHA component in next line
-: SVGColorMake(0, 0, 0, 0);
-
- if( actualFillOpacity.length > 0 )
- fillColorAsSVGColor.a = (uint8_t) ([actualFillOpacity floatValue] * 0xFF);
-
- fillColor = CGColorWithSVGColor(fillColorAsSVGColor);
-}
-else
-{
-#if SVGKIT_UIKIT
-fillColor = [UIColor blackColor].CGColor;
-#else
-fillColor = CGColorGetConstantColor(kCGColorBlack);
-#endif
-}
+ return [self parsePaintColorForElement:svgElement paintColor:actualFill paintOpacity:actualFillOpacity defaultColor:@"black"];
+}
 
-return fillColor;
++(CGColorRef) parseStrokeForElement:(SVGElement *)svgElement
+{
+ NSString* actualStroke = [svgElement cascadedValueForStylableProperty:@"stroke"];
+ NSString* actualStrokeOpacity = [svgElement cascadedValueForStylableProperty:@"stroke-opacity"];
+ return [self parseStrokeForElement:svgElement fromStroke:actualStroke andOpacity:actualStrokeOpacity];
+}
+
++(CGColorRef) parseStrokeForElement:(SVGElement *)svgElement fromStroke:(NSString *)actualStroke andOpacity:(NSString *)actualStrokeOpacity
+{
+ return [self parsePaintColorForElement:svgElement paintColor:actualStroke paintOpacity:actualStrokeOpacity defaultColor:@"none"];
+}
+
+/**
+ Spec: https://www.w3.org/TR/SVG11/painting.html#SpecifyingPaint
+ `fill` or `stroke` allows paint color. This should actually be a <paint> interface.
+ `fill` default color is `black`, while `stroke` default color is `none`
+ */
++(CGColorRef)parsePaintColorForElement:(SVGElement *)svgElement paintColor:(NSString *)paintColor paintOpacity:(NSString *)paintOpacity defaultColor:(NSString *)defaultColor {
+ CGColorRef colorRef = NULL;
+ if (!paintColor) {
+ paintColor = @"none";
+ }
+ if ([paintColor isEqualToString:@"none"])
+ {
+ return NULL;
+ }
+ // there may be a url before the actual color like `url(#grad) #0f0`, parse it
+ NSString *actualPaintColor;
+ NSString *actualPaintOpacity = paintOpacity;
+ NSArray *paintArgs = [paintColor componentsSeparatedByCharactersInSet:NSCharacterSet.whitespaceCharacterSet];
+ if ([paintColor hasPrefix:@"url"]) {
+ if (paintArgs.count > 1) {
+ actualPaintColor = paintArgs[1];
+ }
+ } else {
+ actualPaintColor = paintColor;
+ }
+ if( actualPaintColor.length > 0 || actualPaintOpacity.length > 0 ) {
+ SVGColor paintColorSVGColor;
+ if (actualPaintColor.length > 0) {
+ if (![actualPaintColor isEqualToString:@"none"]) {
+ paintColorSVGColor = SVGColorFromString([actualPaintColor UTF8String]); // have to use the intermediate of an SVGColor so that we can over-ride the ALPHA component in next line
+ } else {
+ return NULL;
+ }
+ } else {
+ if (![defaultColor isEqualToString:@"none"]) {
+ paintColorSVGColor = SVGColorFromString([actualPaintColor UTF8String]);
+ } else {
+ return NULL;
+ }
+ }
+ 
+ if( actualPaintOpacity.length > 0 )
+ paintColorSVGColor.a = (uint8_t) ([actualPaintOpacity floatValue] * 0xFF);
+ 
+ colorRef = CGColorWithSVGColor(paintColorSVGColor);
+ }
+ else
+ {
+ if (![defaultColor isEqualToString:@"none"]) {
+ colorRef = CGColorWithSVGColor(SVGColorFromString([defaultColor UTF8String]));
+ } else {
+ return NULL;
+ }
+ }
+ 
+ return colorRef;
 }
 
 +(void) parsePreserveAspectRatioFor:(Element<SVGFitToViewBox>*) element

Source/DOM classes/SVG-DOM/SVGHelperUtilities.m

@@ -57,7 +57,7 @@ - (SVGGradientLayer *)newGradientLayerForObjectRect:(CGRect)objectRect viewportR
  SVGLength* svgFR = [SVGLength svgLengthFromNSString:frAttr.length > 0 ? frAttr : @"0%"];
  // This is a tempory workaround. Apple's `CAGradientLayer` does not support focal point for radial gradient. We have to use the low-level API `CGContextDrawRadialGradient` and using custom software-render for focal point. So it does not works for `SVGLayredView` which is hardware-render by CA render server.
  if (fxAttr.length > 0 || fyAttr.length > 0 || frAttr.length > 0) {
- SVGKitLogVerbose(@"The radialGradient element #%@ contains focal value: (fx:%@, fy: %@, fr:%@). The focul value is only supported on `SVGFastimageView` and it will be ignored when rendering in SVGLayredView.", [self getAttribute:@"id"], fxAttr, fyAttr, frAttr);
+ SVGKitLogWarn(@"The radialGradient element #%@ contains focal value: (fx:%@, fy: %@, fr:%@). The focul value is only supported on `SVGFastimageView` and it will be ignored when rendering in SVGLayredView.", [self getAttribute:@"id"], fxAttr, fyAttr, frAttr);
  }
  self.cx = svgCX;
  self.cy = svgCY;