SVG Export upgrade - Githubissues

thesamprice commented 4 years ago

When exporting svg

[x] put the different elements in different respected svg groups.
[ ] apply the styles to the groups rather than per element.
[ ] follow the group convention style of inkscape / adobe.
[ ] follow the group convention style of adobe.
[ ] Apply css class names to stars based on their different attributes / star classes.

this would allow users to modify the svg's line / star colors / background in inkscape / adobe. Star colors / borders could be changed by their css class.

ofrohn commented 4 years ago

Ok on having different groups for every element type. In the pull request you apply the styles directly to the groups. Is that how it works in Inkscape, that the subordinate elements inherit styles from their groups? I ask because how styles normally work is that they need to be applied explicitly to any element, e.g. in a CSS declaration as a selector #groupid path or #groupid .classname My idea would be to include a style section at the top of the svg file and put all the style declarations there, and add the appropriate classes to any element, or their group for element-common styles.

thesamprice commented 4 years ago

I agree that having a stylesheet at the top would be best. Applying styles to the groups seemed to work in the browser. It allowed me to modify the groups.

I haven't tested in inkscape only playing around in the browser. Unsure if if you expand the layers it shows you the stile settings or not. Moving as much as possible of the styles up the group element should decrease the file sizes also.

thesamprice commented 4 years ago

Per https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g#:~:text=The%20SVG%20element%20is,with%20the%20element.

Transformations applied to the <g> element are performed on its child elements, and its attributes are inherited by its children.

style elements are attributes of the group so they should be inherited by the children. So i think this is part of the spec. Unsure if inkscape / adobe / etc follow this or can handle stylesheets.

thesamprice commented 4 years ago

I got the groups/layers to load in inkscape. Styles do not show on groups in inkscape.

Still makes it easier in the change css styles in chrome though.

ofrohn commented 4 years ago

I tried it with an inline style section at the beginning of the file like

    <style type="text/css" >
      <![CDATA[
        .outline { fill: rgb(0, 0, 0); }
        .mw { fill: rgb(255, 255, 255); fill-opacity: 0.15; stroke: none; }
        .mwbg { fill: rgb(0, 0, 0); fill-opacity: 1; }
       ]]>
    </style>

and the above styles appear fine in inkscape as well as illustrator. So my suggestion is not to try finding the exact styling format for each format but export one that can be read by all of them, and let them figure out their own style format on saving. So I'd keep the group granularity, give every group or object the appropriate class name instead of styling, and put all the styling in the inline section class selectors. For simplicity’s sake give the classes the same name as the groups. Since I'm already halfway done I could just do it myself.

thesamprice commented 4 years ago

Whatever you think is best. Thanks for moving the styles to the top. Makes modifying the color schemes a bit easier.

On Sat, Jun 13, 2020 at 2:27 PM Olaf Frohn notifications@github.com wrote:

I tried it with an inline style section at the beginning of the file like
<style type="text/css" >

  <![CDATA[

    .outline { fill: rgb(0, 0, 0); }

    .mw { fill: rgb(255, 255, 255); fill-opacity: 0.15; stroke: none; }

    .mwbg { fill: rgb(0, 0, 0); fill-opacity: 1; }

   ]]>

</style>
and the above styles appear fine in inkscape as well as illustrator. So my suggestion is not to try finding the exact styling format for each format but export one that can be read by all of them, and let them figure out their own style format on saving. So I'd keep the group granularity, give every group or object the appropriate class name instead of styling, and put all the styling in the inline section class selectors. For simplicity’s sake give the classes the same name as the groups. Since I'm already halfway done I could just do it myself.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ofrohn/d3-celestial/issues/75#issuecomment-643660158, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGHUME2KNJ6VJD5VVZ55QTRWPAIDANCNFSM4N2S7MXQ .

-- Thank you,

Sam Price (707) 742-3726

thesamprice commented 4 years ago

Groups do make it easier to turn off different features in inkscape / laser cutter programs.

Also it reduces file sizes as you don’t have class names on every element -- Thank you,

Sam Price (707) 742-3726

ofrohn commented 4 years ago

The latest version now has

all the different types of objects in different groups
the text groups all in front of the object groups
all styles (except daylight gradient) as classes in an inline stylesheet
the layers are recognized by inkscape & illustrator, in the latter as groups under the (only) top layer One issue remaining is that illustrator doesn't recognize special characters like e.g. planetary symbols. Probably something to do with stupid font substitutions.

thesamprice commented 4 years ago

Thats great, feel free to close. Regarding it might be possible that the xml header needs changed to some sort of encoding that supports the characters? <?xml version="1.0" encoding="Windows-1252"?>

ofrohn commented 4 years ago

The encoding is fine, all in UTF-8. It complained about the Consolas font not being available, so I replaced it with Deja Vu Sans Mono, which has much more Unicode characters in any case, and is readily available for Illustrator, well, I chalk it up to one of those special user experiences you always get for free with Adobe products. The latest version also fixes a problem with DSO symbols in svg

ofrohn / d3-celestial

SVG Export upgrade #75