Inkscape.org
Beginners' Questions Use CSS to simplify sodipodi settings
  1. #1
    DaltonCalford DaltonCalford @DaltonCalford

    I am looking at a large document that has a great deal of redundant information.
    For example, I have hexagons that by default have not difference between one another except for position, but, I can not find a way to share all the attributes except for the transform ie

      <path
         id="NewEmptyHex"
         sodipodi:type="star"
         style="fill:none;stroke:#7b7979;stroke-width:1;stroke-opacity:1"
         inkscape:flatsided="true"
         sodipodi:sides="6"
         sodipodi:cx="0"
         sodipodi:cy="0"
         sodipodi:r1="55.935318"
         sodipodi:r2="48.441406"
         sodipodi:arg1="0"
         sodipodi:arg2="200"
         inkscape:rounded="0"
         inkscape:randomized="0"
         d="m 264.78793,441.09677 -27.96766,48.44141 h -55.93531 l -27.96766,-48.44141 27.96766,-48.44141 55.93531,0 z"
         transform="matrix(0,0,0,0.26458333,0,0)"
         inkscape:transform-center-y="-1.4703226e-06" />

    vs


      <path
          id="NewEmptyHex-1" 
          transform="matrix(0,0,0,0.26458333,0,0)"
      />

    I would like to have a grid that has thousands of objects, not just hexagons, that except for one or two elements, are identical, but Inkscape wants to use full definitions, making my SVG files hit >1GB in size before I even get to the details.
    Is there a guide or setting to have Inkscape properly optimize things instead of repeating the same setting 100k times?
     


     

  2. #2
    Polygon Polygon @Polygon🌶

    I wonder how thousands of hexagons end up to 1GB file size. Can you possibly benefit from the use of clones instead of duplicates?

  3. #3
    DaltonCalford DaltonCalford @DaltonCalford

    1,658,880 hexagons, as a base drawing, each hexagon is but one element.   There is text, different backgrounds etc.

    I can write it all without using id's, sodipodi settings etc, ie raw SVG but at that point, inkscape is irrelevant.

    I am trying to figure out how to use CSS and styles within the tool itself.

     

  4. #4
    inklinea inklinea @inklinea⛰️

    If you are dealing with such at large number of objects.

    It is essential to make sure each object is as simple as possible.

    I have attached an example of how simple a hexagon can be. ( also before you clone ) 

    It was generated using https://inkscape.org/~inklinea/%E2%98%85polygon-side

     

    Hexagon
  5. #5
    DaltonCalford DaltonCalford @DaltonCalford

    I am attempting to make as simple a series of attributes as possible, thus the question about setting up a single css or style entry and then referring to it instead of duplicating all the information over and over for each item.

    I am doing this for text, paths, gradients etc.    

    Does anyone have a link to a document for properly using styles/css within inkscape using the current version?  I have found how to's for earlier versions that no longer apply.

  6. #6
    inklinea inklinea @inklinea⛰️
    🙌*

    Yes, it's completely possible to make reusable copies of an object and then apply css styles to each object separately.

    In svg this is done with the <use> element ( these are called clones in Inkscape )

    Here is a video by doctormo ( very concise 1m42s ) which shows how clones can have different styles from the original object.

    https://www.youtube.com/watch?v=lfBg-3jTLwA

    In the video, the inline style fill is removed from the original object, and each clone given its own fill colour.

    This would also work for classes too ( I have attached a file which shows clones with class based fills )

    That means that you can have clones which would be as simple as:

    <use
           x="0"
           y="0"
           xlink:href="#path830"
           id="use867"
           transform="translate(-1.6782025,10.878816)"
           width="100%"
           height="100%"
           class="blue" />
           
    And you can choose to apply an inline style, a class or multiple classes to an object.

    Just be aware of https://www.w3schools.com/css/css_specificity.asp

    It's possible to create some strange combinations.

    I have attached a screenshot of the selectors and css panel. Object>Selectors and CSS

    Hex Class
    Screenshot From 2022 04 04 08 58 19
  7. #7
    Adam Belis Adam Belis @AdamBelis

    you could also try tu use svg optimizes 
    https://github.com/svg/svgo-gui

  8. #8
    DaltonCalford DaltonCalford @DaltonCalford

    @inklinea Thank You so much, this is exactly what I needed to find.   
    Now All I need is for Inkscape to support multiple processors better - large files are really a pain when only one CPU is being used.

Inkscape Inkscape.org Inkscape Forum Beginners' Questions Use CSS to simplify sodipodi settings