Adobe Illustrator Gradient Improvements

April 14, 2025, 1:45 p.m.

Below, you can find a list of what Manpreet has worked on in March 2025. Gradients were the primary focus of development this month. For more details, please see MR !105.

Color Stop Operator (Bs)

colorSpec colorType midpoint ramppoint Bs

• Added support for CMYK type (type=0) in colortype=5 spec.
• Refactored the parsing of color stops.
• Fixed a bug where incorrect color and type values were parsed.

Gradient Geometry Operator (Bg)

[flag] name xOrigin yOrigin angle length a b c d tx ty [aspect_ratio] Bg

• Added support for aspect ratio in radial gradients.
• Added additional is_string type information to all operators to resolve ambiguous parsing cases. If either flag or aspect_ratio is missing, it is determined based on the index of name, which is a string.

Gradient Begin Operator (Bb)

[idx] Bb   # idx=0 for fill, idx=1 for stroke

• Added support for fill and stroke gradient instance types based on idx.

Gradient Instances

Support for three different gradient instance definitions has been added:

• Gradient instance with path-render operator

  # -- path definition --
  Bb                                            # Gradient begin operator
  1 (gradient name) 0 0 0 1 1 0 0 1 0 0 1 Bg    # Gradient Geometry operator
  # -- other gradient operators --
  f                                             # Path render operator
  0 BB                                          # Gradient end operator

• Gradient instance in known styles

/FillStyle :
# -- fill style operators --
Bb                                            # Gradient begin operator
2 (gradient name) 0 0 0 1 1 0 0 1 0 0 1 Bg    # Gradient Geometry operator (gradient transformation is always `1 0 0 1 0 0`)
# -- other gradient operators --
0 BB                                          # Gradient end operator
# -- more fill style operators --

• Gradient instance before known-style operator without path-render operator

  # -- object definition --
  Bb                                            # Gradient begin operator
  1 (gradient name) 0 0 0 1 1 0 0 1 0 0 1 Bg    # Gradient Geometry operator (gradient transformation is always `1 0 0 1 0 0`)
  # -- other gradient operators --
  0 BB                                          # Gradient end operator
  # -- other styles --
  6 () XW                                       # Apply known style operator (known style name is never set)

• For gradient instances in known styles and before known-style operator, since the transformation is not present, the gradient from the inline object is reused in all cases.

Linear Gradients

• For linear gradients the following input values are obtained from the Illustrator file:
  • xOrigin, yOrigin, angle, length and transform matrix (a, b, c, d, tx, ty) from the Gradient Geometry (Bg) operator.
• The transform matrix represents the transformation applied to the object after the gradient was applied. This transformation must be (temporarily) removed from the object before performing any further computations.
• A bounding box is computed as if the shape were rotated by -angle, then the box is rotated by angle; this is referred to as bbox.
• The first intersection point of the gradient line and the bbox is p1_origin.
• xOrigin is the distance between p1_origin and p1 of the gradient at the given angle.
• yOrigin is always zero, because for linear gradients moving perpendicular to the angle has no effect.
• length defines the distance between p1 and p2 of the gradient (a length of 1 covers the entire shape at the given angle).
• angle is applied as a gradient transformation at the end.

Radial Gradients

• For radial gradients the following input values are obtained from the Illustrator file:
  • xOrigin, yOrigin, angle, length, transform matrix (a, b, c, d, tx, ty) and aspect_ratio from the Gradient Geometry (Bg) operator.
  • xHighlight, yHighlight, focus_length and focus_angle from the Gradient Hilights (Bh) operator.
• Define a scaling function for the gradient radius and focus point as follows:

  scale_function(x, y, w, h) = sqrt(w^2 * (x - 0.5)^2 + h^2 * (y - 0.5)^2) * sqrt(0.5)

  

• (xOrigin * shape_width, yOrigin * shape_height) defines the origin of the radial gradient relative to the center of the shape.
• The radius is length * length_scale where length_scale = scale_function(xOrigin, yOrigin, shape_width, shape_height)
• The focus point is (xHighlight * focus_scale, yHighlight * focus_scale) where focus_scale = scale_function(0, 0, shape_width, shape_height).
• Instead of using xHighlight and yHighlight directly, they are calculated from focus_length and focus_angle to ensure maximum compatibility with Illustrator.
• angle and aspect_ratio are applied as gradient transformations at the end.

Other Changes

• The Bm, Bc, and Xm gradient operators are ignored as they are not needed.
• Added a post-processing step to remove unused gradients from the generated SVG and performance improvements for the same.
• Fixed a bug where tint values were incorrectly parsed as integers instead of floats in FillGenericCustomColorOperator.

A special thanks to Jonathan for his invaluable help throughout this project, and a huge thanks to Martin for always making sure our blog posts look sharp. And as always, a heartfelt thank you to the entire Inkscape community!