Materialdesign: Problem with Elliptic arc's in SVG path

[XiaoGen-Taiwan]

Just recognised that problems occur when converting recently released SVG’s into FXG’s.
The problem is, that FXG can not handle the newer SVG 2 implementations like Elliptic arc’s.
Would it be possible to provide the Material Design Icons as SVG 1.1 as in earlier commits
like on Jun 22, 2019v3.7.95?

Example: arrow-up-circle.svg

New Version with that elliptic arc:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-arrow-up-circle" width="24" height="24" viewBox="0 0 24 24"><path d="M13,18V10L16.5,13.5L17.92,12.08L12,6.16L6.08,12.08L7.5,13.5L11,10V18H13M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" /></svg>

Old Version without elliptic arc (Commits on Jun 22, 2019v3.7.95):

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="mdi-arrow-up-circle" width="24" height="24" viewBox="0 0 24 24"><path d="M13,18V10L16.5,13.5L17.92,12.08L12,6.16L6.08,12.08L7.5,13.5L11,10V18H13M12,2C17.52,2 22,6.48 22,12C22,17.52 17.52,22 12,22C6.48,22 2,17.52 2,12C2,6.48 6.48,2 12,2Z" /></svg>

[Templarian]

You'll need to use some sort of downgrade converter for the path data. We did a full rewrite of the font build pipeline/tooling (open sourced: @mdi/font-build) that opened things up to use more modern SVG.

Not sure what FXG is, but maybe others have ran into this and written converters.

[cyberalien]

Unfortunately lots of software still don't support compressed arcs. I've built a tool to de-optimize arcs in SVG that might help you. Its built for my Iconify project, but can be used for de-optimizing paths in any icons.

Repo for tools with some sample code in readme: https://github.com/iconify/tools

Code for fixing all icons in directory 'svg' and saving them in 'svg-fixed':

"use strict";

const tools = require('@iconify/tools');

let collection;
tools.ImportDir('svg').then(res => {
    collection = res;
    return collection.promiseAll(svg => tools.SVGO(svg));
}).then(() => {
    return tools.ExportDir(collection, 'svg-fixed');
}).then(count => {
    console.log('Parsed', count, 'files');
}).catch(err => {
    console.error(err);
});

Its part of optimisation process, so it optimises icons first using SVGO, then fixes arcs.

[Templarian]

Thanks @cyberalien that looks awesome!

We haven't heard much from the community about this in their workflows yet. If others are running into this and it becomes an issue we'll work to expand the tooling and allow for a legacy download package (with a slightly larger file size).

https://github.com/Templarian/MaterialDesign-Util/ is our util library, but it's kept basic. This logic would be added here if we can justify enough use cases.

[cyberalien]

If you'd want to add it to your workflow, this is code for de-optimizing arcs: https://github.com/iconify/tools/blob/master/src/optimize/flags.js

Function cleanPath() is what modifies path. It takes compressed path, returns uncompressed path.

Code is heavily inspired by svg-pathdata (MIT license): https://github.com/nfroidure/svg-pathdata

Some unit tests to make sure path is de-optimized correctly: https://github.com/iconify/tools/blob/master/tests/optimize/flags_test.js

[XiaoGen-Taiwan]

Hello Vjacheslav, Hello Austin,

First of all, thanks a lot for having a look at the problem "elliptic arc’s within SVG paths".
I reviewed the source code you provided (flags.js) but unfortunately un-optimizing by using (‘cleanPath()’) does not
convert elliptic arc’s into alternatives like cubic curves.

One solution might be, utilising the function a2c (from adobe-webplatform/Snap.svg) within ‘path.js’.
https://github.com/adobe-webplatform/Snap.svg/blob/b242f49e6798ac297a3dad0dfb03c0893e394464/src/path.js#L752 https://github.com/adobe-webplatform/Snap.svg/blob/b242f49e6798ac297a3dad0dfb03c0893e394464/src/path.js#L752

Well, it seems I’m not the only one having problems with the elliptic arc implementation.
Furthermore, Google itself does not provide its material icons with elliptical arc’s (at least I haven’t found one).
Another question would be, is the rendering process really faster … I doubt that, at least not in cases where its not
really necessary using elliptic arcs.

Regards
Soeren

On 26. Oct 2019, at 02:40, Austin Andrews [e-mail] wrote:

Thanks @cyberalien https://github.com/cyberalien that looks awesome!

We haven't heard much from the community about this in their workflows yet. If others are running into this and it becomes an issue we'll work to expand the tooling and allow for a legacy download package (with a slightly larger file size).

https://github.com/Templarian/MaterialDesign-Util/ https://github.com/Templarian/MaterialDesign-Util/ is our util library, but it's kept basic. This logic would be added here if we can justify enough use cases.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub https://github.com/Templarian/MaterialDesign/issues/4547?email_source=notifications&email_token=ANSRLWJ5CDXYWEWSTC6V4JTQQM4S3A5CNFSM4JEQ2N62YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECJGVCQ#issuecomment-546466442, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANSRLWO7GVLFVU2KVWNLK53QQM4S3ANCNFSM4JEQ2N6Q.

[cyberalien]

I haven't seen software that can't handle arcs. Some software can't handle compressed arc flags, which flags.js fixes, but not being able to handle arcs means software doesn't support basic SVG standard.

Arcs have been part of SVG standard since beginning. See https://www.w3.org/TR/2001/REC-SVG-20010904/paths.html#PathDataEllipticalArcCommands

[Templarian]

It's not that compressed arcs are faster to render, but that over 4600+ icons these small tweaks greatly reduce the overall package size. Since this really only target browsers/mobile where SVG rendering is more mature this works.

We only had legacy paths due to our font build tools that relied on _very_ old packages. Original was written over 5 years ago and was barely touched out of fear of breaking our monthly release schedule. 😄 Luckily we found time and 3.7.xx+ uses way more modern tooling.

[cyberalien]

Yes, such small tweak does reduce package size. I've compared running SVGO on this repository with compressed flags, then without. Uncompressing arc flags increased total size by 2.3%.

@XiaoGen-Taiwan After checking out FXG, FXG 2.0 does support all parts of SVG path, but not arcs. Its unfortunate. There is however a package that converts arcs to cubic bezier: https://github.com/colinmeinke/svg-arc-to-cubic-bezier
I hope this helps.