LinearGradientBrush trouble (2)

[Kozinaka]

I have found in https://commons.wikimedia.org/wiki/Tango_icons fragment of icon with linear gradient trouble in SharpVectors. This is hard core sample:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="32px"
   height="32px"
   id="svg2"
   sodipodi:version="0.32"
   inkscape:version="0.92.3 (2405546, 2018-03-11)"
   version="1.0"
   sodipodi:docname="Test2.svg"
   inkscape:export-filename="/home/lapo/Desktop/per jimmac/scalable/devices/battery.png"
   inkscape:export-xdpi="90"
   inkscape:export-ydpi="90"
   inkscape:output_extension="org.inkscape.output.svg.inkscape">
  <defs
     id="defs4">
    <linearGradient
       inkscape:collect="always"
       xlink:href="#StrokeGradient"
       id="linearGradient3339-5"
       gradientUnits="userSpaceOnUse"
       x1="15.518289"
       y1="35.925144"
       x2="17.391279"
       y2="41.137268" />
    <linearGradient
       inkscape:collect="always"
       id="StrokeGradient">
      <stop
         style="stop-color:#d11111;stop-opacity:1"
         offset="0"
         id="stop7479-7" />
      <stop
         style="stop-color:#7abe03;stop-opacity:1"
         offset="1"
         id="stop7481-6" />
    </linearGradient>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="32"
     inkscape:cx="23.422064"
     inkscape:cy="18.0022"
     inkscape:document-units="px"
     inkscape:current-layer="layer5"
     showgrid="true"
     inkscape:window-width="1920"
     inkscape:window-height="1017"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     stroke="#c4a000"
     inkscape:grid-points="false"
     inkscape:grid-bbox="true"
     fill="#555753"
     showborder="true"
     inkscape:showpageshadow="false"
     inkscape:window-maximized="1"
     inkscape:snap-global="false">    
  </sodipodi:namedview>
  <g
     inkscape:groupmode="layer"
     id="layer5"
     inkscape:label="Icon"
     style="display:inline"
     transform="translate(0,-16)">
    <ellipse
       id="path7459-3"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#linearGradient3339-5);stroke-width:1.24232507;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
       cx="16.175068"
       cy="38.542446"
       rx="7.8665628"
       ry="4.8613591"
       transform="matrix(1.2076429,0,0,0.53652634,-3.5337049,9.6498437)" />
  </g>
</svg>

I have tested 3 different SVG parsers - all of them failed on this sample.
I think it cos of this transformations:

<g
     inkscape:groupmode="layer"
     id="layer5"
     inkscape:label="Icon"
     style="display:inline"
     transform="translate(0,-16)">  <=====
    <ellipse
       id="path7459-3"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:url(#linearGradient3339-5);stroke-width:1.24232507;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
       cx="16.175068"
       cy="38.542446"
       rx="7.8665628"
       ry="4.8613591"
       transform="matrix(1.2076429,0,0,0.53652634,-3.5337049,9.6498437)" /> <======
  </g>

[paulushub]

@Kozinaka I have (hopefully) resolved all the issues you have reported including this one. This one is due to the ellipse's transform not being applied to the pen's stroke.
The previous code only applies the transformation of the object to the fill's brush, not the stroke's brush.

I have committed the changes. Please can you verify these issues again? Preparing to release the next version as 1.1 next week, please help. Thank you.

[Kozinaka]

@paulushub Thank you! It works like a charm! I have discarded all my local fixes of SharpVectors.

To help you with preparing to release I have checked SharpVectors on my work icon collection and report all errors to you in attached file. Some parsing errors, some work area/layers clipping errors etc. I did compare SharpVectors output with Inkscape output. Subject *.svg files included. It will help I hope: SharpVectorsCheck.zip

[paulushub]

@Kozinaka Thanks so much for the quick response and time taken to research the extra issues. I have downloaded the attached zip file and will try to fix many as possible if not all.
Again, thank you.

[paulushub]

Hello @Kozinaka,
I think with the 1f3edee commit, I have completed the remaining issues in the test files.
Here is the complete breakdown:

1. Issue1 - completely fixed (in previous commit)
2. Issue2 - completely fixed (in this commit)
3. Issue3 - completely fixed (in previous commit)
4. Issue4 - completely fixed (in previous commit)
5. Issue5 - not fixed (see attached picture): There is an invalid path defined, can be fixed by flattening path to smooth it, but more tests is needed to see the impact on other files. I changed the color to review the path (in yellow).
6. Issue6 - not fixed (in previous commit): Not easy to fix, due to limitation imposed by mitter support in WPF graphics. IE11 gives the same result.
7. Issue7 - completely fixed (in previous commit)
8. Issue8 - completely fixed (see attached picture): Contains many drawing but only one within the viewbox, consistent with displays in all browsers.
9. Issue9 - completely fixed (in this commit): Missing gradient stop offsets are now set to 0.
10. Issue10 - completely fixed (in previous commit)
11. Issue11 - partially fixed (in previous commit): Shadow has effects, not supported yet.
12. Issue12 - completely fixed (in previous commit): Nothing is displayed, which is consistent in all browsers. The problem is that the only drawing is outside of the viewbox. Will be visible in Inkscape and any package not regarding the viewbox in display.
13. Issue13 - completely fixed (in this commit): Reworked the path rendering
14. Issue14 - completely fixed (in previous commit)
15. Issue15 - completely fixed (in previous commit)

[Kozinaka]

Oh, it's great! Thank you!

It's time to pull new fixed version! :)

[paulushub]

Thank you, preparing version 1.2 for release by Monday.

[paulushub]

@Kozinaka An update.
For Issue5: Here is the result of applying Geometry.GetFlattenedPathGeometry with tolerance of 0.0022, relative to the cloud. It is trading smoothness for better result, tolerance of 0.0020 still had a small issue.
I do not know if this can be considered a feature and added as an option - if you need it I could add this option, together with the tolerance settings.

For Issue12: I have added an option (IgnoreRootViewbox) to turn off the root viewbox, which becomes a clipping area for the whole output and prevents any drawing not within it from showing.

[Kozinaka]

Issue5: No, I dont need it, thank you. I've just found this issue when testing SharpVectors. There was some icons from Wikimedia GNOME Icons in my test samples, this icon just one of it: https://commons.wikimedia.org/wiki/GNOME_Desktop_icons

Issue12: In this issue I means yellow rectangle as unexpected behavior. I expected just white area in output. I think that clipping by root viewbox is required and IgnoreRootViewbox is little hacky solution.

Even more, I experience some inconvenience due to fact that SharpVectors library ignores size of the image. Doesn't matter what size of my icon it will be cropped and scaled by its visible bounds. For icons in my work project I have to add to icons additional layer "Bounds" with transparent rectangle for save source size of the image in output. In small resolutions (f.e. 32х32 px) for pixelperfect output size of picture is very important. Icons have to be optimized for resolution of rasterization.

I need an option like ConsiderRootViewboxInOutputScale and suppose this option turned in by default. But I do not insist. In general, I have already adapted. :).

[paulushub]

Thanks for the feedback.
There is now EnsureViewboxSize option that adds the transparent bounds, it was turned on by default but others are having problems with it so it is now an option.

Options added through settings make it easy to turn off, so should not be a problem. Can you explain what is expected from the ConsiderRootViewboxInOutputScale option?

Currently planning a new application: Icon Manager or Explorer. Surprisingly, an icon site is also recommendation this library (particularly, the Converter tool) on its site.
The Icon Manager could

1. Export icons images to several sizes; 64x64, 48x48, 32x32, 16x16, custom size etc
2. Provide color scheme support to change colors; could create and convert from gray-scale
3. Export to WPF resource dictionary
4. Displays icons in grid views from multiple directories and sources
5. Create windows *.ico format with different sizes
6. Etc

If you are interested and have some feature list, please post them.

[Kozinaka]

EnsureViewboxSize — that's what I need. Thank you! This is exactly what I expected from ConsiderRootViewboxInOutputScale option.

Icon Manager is very interesting thing! I'm not sure how to make it convenient. I done similar work many times - this is many handmade work cos of optimization to output size.

(you can see there pixelperfect edges on small sizes and blurry edges on scaled preview pictures where image scaled)

Every size image for *.ico requires snapping to pixel grid. I don't know how to make it automatic. :(

[Kozinaka]

If it would be possible I wish have a quick edit mode to snap parts of icon for each size version. Like a small specialized Inkscape for snapping: move nodes, change thickness, snapping, quick preview for result.