Parsing error missingAttribute(name: "offset")

[2n]

Microsoft has released a huge Emoji set as open source.
https://github.com/microsoft/fluentui-emoji

For each Emoji, three SVG files "Color", "Flat", and "High Contrast" and a PNG image "3D" are available.
SwiftDraw seems to fail to convert most SVGs of type "Color".
The error messages are all parsing error missingAttribute(name: "offset").

Try face_with_open_mouth_color.svg.

$ swiftdraw face_with_open_mouth_color.svg --format png --size 512x512
[swiftdraw] parsing error missingAttribute(name: "offset")
Failure

The only "Flat" type that fails to convert is eleven_oclock_flat.svg.

$ swiftdraw eleven_oclock_flat.svg --format png --size 512x512
[swiftdraw] parsing error missingAttribute(name: "offset")
Failure

In addition, a few of the "Color" types are successfully converted, but most of them are not converted correctly.
For example, the conversion of avocado_color.svg results in a black cross section.
(This may be a separate issue from the above.)

I'm not sure if you plan to support such complex SVGs, but I'm reporting this just in case.

[swhitty]

Thank you @2n for the bug report.

Version 0.10.0 includes support for radial gradients with a few other bug fixes to render these SVGs.

The more complex <filter> tags are not supported and I'm not sure if they ever will be. (Although they could map to CIFilter I suppose...)

But it does render much closer to the source now;

[2n]

Thanks again for the quick bug fix!

I have understood the difficulty of supporting <filter> tags.
That avocado looks good enough.

Thank you for your time despite your busyness.

[swhitty]

No problem, more than happy to look into supporting more of the SVG standard.

FYI the mainline branch now includes better support for the radial gradients in these SVGs.

[2n]

Wow, that's great!
Those are even closer to the original look.
I can't wait to try the next release.

[swhitty]

Now available in 0.10.1

[2n]

Thanks for the great work!

The PNG format output is correct, but the output Swift code draws strange images in the iOS simulator.
Only the face outline is drawn at the specified size, and the actual image is drawn upside down in the lower left corner at the original size.
(This seems to happen only with the newly supported SVG.)

---

The following error occurs in a very small percentage of SVGs.
(grapes_color.svg)

$ swiftdraw grapes_color.svg --format png
[swiftdraw] parsing error missingAttribute(name: "stop-color")
Failure

---

Below are cases where there are still differences from the original.

In some Emojis, paths for highlighting is clearly drawn.
(ghost_color.svg, teddy_bear_color.svg, snake_color.svg, two-hump_camel_color.svg)

In some Emojis, some parts are not drawn.
(sleepy_face_color.svg, spider_color.svg, two_oclock_color.svg, petri_dish_color.svg)

This is a rare case.
(star-struck_color.svg)

I understand that perfect support for Microsoft's new Emoji set is not the goal of this library, but I hope this helps in some small way to improve this library.

[swhitty]

0.10.2 includes some fixes for some of these errors and includes ability to stroke a path with a linear gradient.

The thin line artifacts appear because the <feGaussianBlur> filter is not supported. These elements are blurred into the image in other renderers.

One option is to hide these elements completely which improves some of the icons;

But hiding these elements makes others look broken;

I could offer a command line option to hide/show filters if that would help?

[2n]

Great work!

Now high quality emojis display wonderfully on the iOS simulator.
It's really really great.

I think the command line option to hide elements where unsupported filters are used is a good idea.
If this option is implemented, it may be even better to echo warnings when converting contain unsupported filters.

// like this...
$ swiftdraw snake_color.svg --format png
Created: /Users/***/***/snake_color.png
Warning: <feGaussianBlur> filter in this SVG file is not supported. You can hide these elements with [--blabla] option.

---

The following is a small request not related to this issue.
If there are no problems, I would appreciate it if you could consider it.

---

Just as dash-separated-name.svg becomes svgDashSeparatedName(size:) in the conversion to Swift code, it might be useful if snake_case_name.svg becomes svgSnakeCaseName(size:) as well.

---

The converted Swift code has two methods, svgFileName(size:) and drawSVG(in:scale:), the latter always having the same name.
Combining multiple Swift code into one file will naturally result in a compile error of Invalid redeclaration of 'drawSVG(in:scale:).
I thought it would be more convenient if the name of drawSVG(in:scale:) was drawFileName(in:scale:) containing the file name.

// grapes.svg
extension UIImage {
  static func svgGrapes(size: CGSize = CGSize(width: 32.0, height: 32.0)) -> UIImage {
    // ...
  }

  private static func drawSVG(in ctx: CGContext, scale: CGSize) {
    // ...
  }
}

// snake.svg
extension UIImage {
  static func svgSnake(size: CGSize = CGSize(width: 32.0, height: 32.0)) -> UIImage {
    // ...
  }

  // Invalid redeclaration of 'drawSVG(in:scale:)'
  private static func drawSVG(in ctx: CGContext, scale: CGSize) {
    // ...
  }
}

[2n]

There were still a few cases where some parts were not drawn.

smiling_face_with_smiling_eyes_color.svg
yawning_face_color.svg
worried_face_color.svg
troll_color.svg

[2n]

I must apologize for the serious mistake.
The images I have been using for comparison as originals were 3D rendered images from a different source than SVG.
I assumed that the PNG images included in the library were exported SVGs.

The clay animation-like texture and realistic three-dimensionality of the emojis I used for comparison is not originally available in SVG.
Comparing again with Figma's output, SwiftDraw appears to work almost perfectly, except for unsupported filters and some missing parts.

My deepest apologies for my silly mistake.

[swhitty]

Oh good to know.

0.11.0 includes support for stroking a path with radial gradients (fixes the latest issues). It also includes suggested changes for snake_case filenames and drawFileName().

Also a new Image.Options.hideUnsupportedFilters allows clients to optionally hide elements with unsupported filters.

[2n]

Many thanks for your work.
Is the command line tool not included in the latest release?

[swhitty]

It is uploaded now — was being notarized.

[2n]

The latest version works wonderfully.
Thanks so much for your hard work and adopting my suggestions.

I feel very fortunate to have found your library through a web search.