Edit Ubuntu Suru Icons to make them fully editable

[Xaviju]

Suru Icon Set comes with a inlined styles in the SVG. That makes them hardly usable in the UI because does not allow the user to edit the icon colors. This symbols set need the be cleaned up to remove inkscape and ubuntu suru junk code.

[victorwestmann]

Is there a way I can help on this matter? I'd only need instructions before starting though. :smiley:

[Xaviju]

Hi @victorwestmann and thank for your help!! The problem with the Ubuntu Suru icons is that the symbols are not clean. It has a lot of information about styles that should be removed.

An example, the current symbol in the file suru-icon-devices.svg Currently, it looks like this:

<symbol
       id="audio-carkit-symbolic">
      <title
         id="title8844">audio-carkit-symbolic</title>
      <g
         style="display:inline"
         id="g4845"
         transform="matrix(0,-1,-1,0,373.50506,516.50504)">
        <g
           transform="matrix(0,-1,-1,0,572.36222,615.36221)"
           id="g1628">
          <g
             id="g1630"
             transform="matrix(1.875,0,0,1.875,-366,-1652.8169)">
            <rect
               transform="translate(0,804.3622)"
               y="152"
               x="288"
               height="48"
               width="48"
               id="rect1632"
               style="opacity:0.21171169;fill:none;stroke:none" />
          </g>
          <path
             id="path4155"
             transform="translate(174,140.36222)"
             d="M 45,4 C 22.40962,4 4,22.40962 4,45 4,67.59037 22.40962,86 45,86 67.59038,86 86,67.59037 86,45 86,22.40962 67.59038,4 45,4 Z m 0,6 C 64.38777,10 80,25.61222 80,45 80,64.38777 64.38777,79.998047 45,79.998047 25.61223,79.998047 10,64.38777 10,45 10,25.61222 25.61223,10 45,10 Z"
             style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;color-interpolation:sRGB;color-interpolation-filters:linearRGB;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:9;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
          <path
             id="circle4228"
             d="m 219,172.27131 c -3.34581,0 -6.40258,1.28698 -8.72514,3.37713 -3e-5,-0.019 -0.002,-0.0364 -0.002,-0.0554 -1.61202,1.312 -3.46513,2.37618 -5.56108,3.1875 -2.10581,0.80466 -4.37431,1.20597 -6.80539,1.20597 -1.53795,0 -3.00655,-0.17898 -4.42117,-0.50071 -0.43193,1.88909 -0.66685,3.85478 -0.66685,5.87642 0,2.01214 0.23246,3.96778 0.66051,5.84872 1.40523,-0.31572 2.86334,-0.49219 4.3892,-0.49219 4.17552,0.25819 9.02545,0.88266 11.81251,3.96307 2.78705,3.08042 3.93827,7.89934 3.96307,11.81251 0,1.52513 -0.17677,2.98246 -0.49219,4.38707 1.88094,0.42805 3.83658,0.66264 5.84872,0.66264 2.02203,0 3.987,-0.23689 5.87642,-0.66903 -0.32142,-1.414 -0.50071,-2.88183 -0.50071,-4.41904 0.25623,-4.16686 0.88339,-9.00711 3.96094,-11.78693 3.07755,-2.77983 7.88994,-3.92554 11.79546,-3.95029 1.52586,0 2.98397,0.17647 4.3892,0.49219 0.42805,-1.88094 0.66051,-3.83658 0.66051,-5.84872 0,-2.02164 -0.23492,-3.98733 -0.6669,-5.87642 -1.41462,0.32173 -2.88322,0.50071 -4.42117,0.50071 -2.43108,0 -4.69958,-0.40131 -6.8054,-1.20597 -2.09595,-0.81132 -3.94905,-1.87549 -5.56108,-3.1875 0,0.0191 -0.002,0.0363 -0.002,0.0554 -2.32251,-2.09015 -5.37928,-3.37713 -8.72509,-3.37713 z m -36,3.27273 0,19.63636 2.38636,0 c 1.46107,-1.19962 3.1248,-2.18118 4.97088,-2.96804 -0.5258,-2.19994 -0.81179,-4.49083 -0.81179,-6.85014 0,-2.37225 0.2889,-4.67755 0.82031,-6.8885 -1.8132,-0.77942 -3.44935,-1.74865 -4.88778,-2.92968 l -2.47798,0 z m 69.52202,0 c -1.43843,1.18103 -3.07458,2.15026 -4.88778,2.92968 0.53141,2.21095 0.82031,4.51625 0.82031,6.8885 0,2.35931 -0.28599,4.6502 -0.81179,6.85014 1.84608,0.78686 3.50981,1.76842 4.97088,2.96804 l 2.38636,0 0,-19.63636 -2.47798,0 z M 219,178.81676 c 3.65372,0 6.54546,2.89174 6.54546,6.54546 0,3.65372 -2.89174,6.54546 -6.54546,6.54546 -3.65372,0 -6.54546,-2.89174 -6.54546,-6.54546 0,-3.65372 2.89174,-6.54546 6.54546,-6.54546 z m 6.8885,35.17757 c -2.21125,0.53156 -4.51591,0.82244 -6.8885,0.82244 -2.35879,0 -4.65065,-0.28621 -6.85014,-0.81179 -0.78686,1.84608 -1.76842,3.50981 -2.96804,4.97088 l 0,2.38636 19.63636,0 0,-2.47798 c -1.18142,-1.43891 -2.15014,-3.07598 -2.92968,-4.88991 z"
             style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;color-interpolation:sRGB;color-interpolation-filters:linearRGB;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.99999905;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
        </g>
      </g>
    </symbol>

A clean symbol should look something like this (this is the first symbol in the file suru-icon-devices.svg)

<symbol
       id="audio-carkit-symbolic">
      <title>audio-carkit-symbolic</title>
       <path
             transform="translate(174,140.36222)"
             d="M 45,4 C 22.40962,4 4,22.40962 4,45 4,67.59037 22.40962,86 45,86 67.59038,86 86,67.59037 86,45 86,22.40962 67.59038,4 45,4 Z m 0,6 C 64.38777,10 80,25.61222 80,45 80,64.38777 64.38777,79.998047 45,79.998047 25.61223,79.998047 10,64.38777 10,45 10,25.61222 25.61223,10 45,10 Z" />
       <path
             d="m 219,172.27131 c -3.34581,0 -6.40258,1.28698 -8.72514,3.37713 -3e-5,-0.019 -0.002,-0.0364 -0.002,-0.0554 -1.61202,1.312 -3.46513,2.37618 -5.56108,3.1875 -2.10581,0.80466 -4.37431,1.20597 -6.80539,1.20597 -1.53795,0 -3.00655,-0.17898 -4.42117,-0.50071 -0.43193,1.88909 -0.66685,3.85478 -0.66685,5.87642 0,2.01214 0.23246,3.96778 0.66051,5.84872 1.40523,-0.31572 2.86334,-0.49219 4.3892,-0.49219 4.17552,0.25819 9.02545,0.88266 11.81251,3.96307 2.78705,3.08042 3.93827,7.89934 3.96307,11.81251 0,1.52513 -0.17677,2.98246 -0.49219,4.38707 1.88094,0.42805 3.83658,0.66264 5.84872,0.66264 2.02203,0 3.987,-0.23689 5.87642,-0.66903 -0.32142,-1.414 -0.50071,-2.88183 -0.50071,-4.41904 0.25623,-4.16686 0.88339,-9.00711 3.96094,-11.78693 3.07755,-2.77983 7.88994,-3.92554 11.79546,-3.95029 1.52586,0 2.98397,0.17647 4.3892,0.49219 0.42805,-1.88094 0.66051,-3.83658 0.66051,-5.84872 0,-2.02164 -0.23492,-3.98733 -0.6669,-5.87642 -1.41462,0.32173 -2.88322,0.50071 -4.42117,0.50071 -2.43108,0 -4.69958,-0.40131 -6.8054,-1.20597 -2.09595,-0.81132 -3.94905,-1.87549 -5.56108,-3.1875 0,0.0191 -0.002,0.0363 -0.002,0.0554 -2.32251,-2.09015 -5.37928,-3.37713 -8.72509,-3.37713 z m -36,3.27273 0,19.63636 2.38636,0 c 1.46107,-1.19962 3.1248,-2.18118 4.97088,-2.96804 -0.5258,-2.19994 -0.81179,-4.49083 -0.81179,-6.85014 0,-2.37225 0.2889,-4.67755 0.82031,-6.8885 -1.8132,-0.77942 -3.44935,-1.74865 -4.88778,-2.92968 l -2.47798,0 z m 69.52202,0 c -1.43843,1.18103 -3.07458,2.15026 -4.88778,2.92968 0.53141,2.21095 0.82031,4.51625 0.82031,6.8885 0,2.35931 -0.28599,4.6502 -0.81179,6.85014 1.84608,0.78686 3.50981,1.76842 4.97088,2.96804 l 2.38636,0 0,-19.63636 -2.47798,0 z M 219,178.81676 c 3.65372,0 6.54546,2.89174 6.54546,6.54546 0,3.65372 -2.89174,6.54546 -6.54546,6.54546 -3.65372,0 -6.54546,-2.89174 -6.54546,-6.54546 0,-3.65372 2.89174,-6.54546 6.54546,-6.54546 z m 6.8885,35.17757 c -2.21125,0.53156 -4.51591,0.82244 -6.8885,0.82244 -2.35879,0 -4.65065,-0.28621 -6.85014,-0.81179 -0.78686,1.84608 -1.76842,3.50981 -2.96804,4.97088 l 0,2.38636 19.63636,0 0,-2.47798 c -1.18142,-1.43891 -2.15014,-3.07598 -2.92968,-4.88991 z" />
</symbol>

So all information not related to the path is removed. At the end, a clean symbol has the minimum relevant amount of info to be displayed:

• symbol tag
• (optional) transforms if necessary
• path tag, circle, polygon...etc.
• no styles
• end symbol tag.

It should be done for every symbol in the library. Look for example at the latest Genericons: https://raw.githubusercontent.com/Xaviju/inkscape-open-symbols/master/genericons/genericons.svg

If you'd like to help I willl assign this issue to you :)

[victorwestmann]

I'll give it a try and let you know if I succeeded or failed. Thanks for the help so far.

@Xaviju I noted this SVG file already works in Inkscape when I put it under share/library. Is it incomplete or is there more work to do on it? Could you please advise?

[mivoligo]

As I was the one who converted Suru icons to Inkscape symbols, I need to speak up. Thing is there's already new set of Suru icons for Ubuntu and almost all of those which I transformed are outdated. Unfortunately I don't currently have time to update the set :( @victorwestmann if you want to work on it, here's link to the repository with up to date icons: http://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk/files/head:/suru-icons/ To properly convert them to symbols, you need to open each of them, remove stuff like guidelines, ungroup, convert elements into path etc. It's really a lot of work. I don't know if/how it could be done in other way.

[victorwestmann]

Hi there, If you tell me this link works (the instructions it provides) I can ty to help. :)

https://www.youtube.com/watch?v=jdaGB0zCdHw [image: :+1:]

Cheers!

--Victor Westmann

2015-11-09 10:05 GMT-02:00 Michał notifications@github.com:

As I was the one who converted Suru icons to Inkscape symbols, I need to speak up. Thing is there's already new set of Suru icons for Ubuntu and almost all of those which I transformed are outdated. Unfortunately I don't currently have time to update the set :( @victorwestmann https://github.com/victorwestmann if you want to work on it, here's link to the repository with up to date icons: http://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk/files/head:/suru-icons/ To properly convert them to symbols, you need to open each of them, remove stuff like guidelines, ungroup, convert elements into path etc. It's really a lot of work. I don't know if/how it could be done in other way.

— Reply to this email directly or view it on GitHub https://github.com/Xaviju/inkscape-open-symbols/issues/6#issuecomment-155046536 .

[mivoligo]

It does work, yes. You can try with a few icons and show here what you achieved. @Xaviju will tell you if they're fine or not.

[victorwestmann]

Is there a way I can download all of the SVG icons at once? Via launchpad or webbrowser?

[UPDATE! 2016-10-01] Actually there is one way to download it all at once. It gets the whole thing (~13 MB) but it's worth it. Go to the link http://bazaar.launchpad.net/~ubuntu-art-pkg/ubuntu-themes/trunk/revision/514?start_revid=514 and click on the "download tarball" link. Voilá.

[mivoligo]

hmmm... I don't think so. You can pull all repo with bzr. Well, actually I can do that, zip the icons only and attach here.

[mivoligo]

Here you go https://drive.google.com/file/d/0B-dxkPxzoijrNk1EQTd5UEtOSE0/view?usp=sharing

[Xaviju]

thanks @mivoligo

[victorwestmann]

Yay! I was able to downlod the file. Thanks! There are untitled files. What should we do with them? Is there a way we can do this in an automated way in the future? I´ll do some research. If I find anything new I'll let you guys know.

[victorwestmann]

This issue is strongly related to the https://github.com/Xaviju/inkscape-open-symbols/issues/16 ;)

[PanderMusubi]

See also https://github.com/PanderMusubi/inkscape-open-symbols/issues/80