3 ms·

One of the issues you run into with SVG is performance, particularly if you need any kind of styling of the SVG. As the tool scales you have to put in some effo

by duped 5y ago

One of the issues you run into with SVG is performance, particularly if you need any kind of styling of the SVG. As the tool scales you have to put in some effort into optimizing the generated SVG to help. If you aren't handrolling or compiling the SVG yourself you also need to look out for whatever your tool is doing. Illustrator and Sketch in particular do some wonky nonsense with filters to support things like inner/drop shadows, and you may want to A/B the SVG in different browsers to make sure they look the same. It's been a few years since I had to do this, but in my experience you really had to restrict what features of the SVG editor your designers used.

ygra 5y ago
> wonky nonsense with filters to support things like inner/drop shadows How else would you implement that with SVG? And in my experience filters have been very well supported for the past years. They are part of the SVG conformance tests anyway, so any mismatch is also a broken SVG implementation.
AndrewSwift 5y ago
There's one real bug where Illustrator doesn't handle opacity masks correctly, but otherwise it's been really reliable about displaying correctly. However, in the past 10 years or so, a bunch of Photoshop functionality has been added in to Illustrator, and none of it is compatible with SVG. So, there are various and warnings and workarounds for drop shadows etc. But, Illustrator has good support for SVG effects, so drop shadows in particular are pretty simple to use. The long term goal is to create really clean SVG/HTML hybrid code with a new program, but I still have to write it! --- There's also an issue where SVG's are slower to animate because they don't use hardware acceleration, but my understanding is that this is coming soon.
- duped 5y ago
  The discrepancies I'm talking about is not between Illustrator and your browser, but between different browsers/renderers. Filters in particular are problematic. You have to be careful about what you mean by "SVG effects" since the spec is quite large and has many ways of doing things, and different software may not agree with how they work. I don't think any renderer passes the entire standard test suite.

by duped 5y ago

ygra 5y ago

> wonky nonsense with filters to support things like inner/drop shadows How else would you implement that with SVG? And in my experience filters have been very well supported for the past years. They are part of the SVG conformance tests anyway, so any mismatch is also a broken SVG implementation.

AndrewSwift 5y ago

There's one real bug where Illustrator doesn't handle opacity masks correctly, but otherwise it's been really reliable about displaying correctly. However, in the past 10 years or so, a bunch of Photoshop functionality has been added in to Illustrator, and none of it is compatible with SVG. So, there are various and warnings and workarounds for drop shadows etc. But, Illustrator has good support for SVG effects, so drop shadows in particular are pretty simple to use. The long term goal is to create really clean SVG/HTML hybrid code with a new program, but I still have to write it! --- There's also an issue where SVG's are slower to animate because they don't use hardware acceleration, but my understanding is that this is coming soon.

duped 5y ago
The discrepancies I'm talking about is not between Illustrator and your browser, but between different browsers/renderers. Filters in particular are problematic. You have to be careful about what you mean by "SVG effects" since the spec is quite large and has many ways of doing things, and different software may not agree with how they work. I don't think any renderer passes the entire standard test suite.