OSA Icons

[tstackhouse]

OSA Icon set for creating network diagrams: http://www.opensecurityarchitecture.org/cms/library/icon-library

Thanks for putting this together :+1:

[Xaviju]

@tstackhouse thanks for the iconset suggestion. :)

[njh]

I have been looking into this and it is looking trickier than some of the other iconsets because they contain more than just path data.

Do you know if it is possible for Inkscape symbols to contain <defs> and <linearGradient>?

[Xaviju]

I think it does. Could you please share an example of the SVG code to test it?

[njh]

This the result of running svgo and gulp on the icon set.

Lots of <linearGradient> with the same id in the XML.

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="e"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="c"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="d"><stop offset="0"/><stop offset="1" stop-opacity="0"/></linearGradient><linearGradient x1="33" y1="35.75" x2="31.5" y2="42.5" id="g" xlink:href="#a" gradientUnits="userSpaceOnUse"/><radialGradient cx="16.564" cy="11.132" r="19.063" fx="16.564" fy="11.132" id="j" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.0129 1.6852 1.71308 .01311 -1.041 -10.116)"/><linearGradient x1="17.061" y1="11.395" x2="12.624" y2="12.584" id="i" xlink:href="#c" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.17193 1.17193 0 1.783 54.101)"/><radialGradient cx="24.837" cy="36.421" r="15.645" fx="24.837" fy="36.421" id="f" xlink:href="#d" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 .53672 0 16.873)"/><linearGradient id="b"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="a"><stop offset="0" stop-color="#99b00b"/><stop offset="1" stop-color="#99b00b" stop-opacity="0"/></linearGradient><linearGradient x1="9.597" y1="21.469" x2="47.863" y2="21.469" id="h" xlink:href="#e" gradientUnits="userSpaceOnUse" gradientTransform="scale(.89094 1.1224)"/>
<linearGradient id="e"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="d"><stop offset="0"/><stop offset="1" stop-opacity="0"/></linearGradient><radialGradient cx="15.094" cy="13.283" r="10.165" fx="15.094" fy="13.283" id="j" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.49603 0 0 2.30069 -25.124 -17.826)"/><linearGradient x1="26.5" y1="34.25" x2="26.25" y2="43.572" id="h" xlink:href="#b" gradientUnits="userSpaceOnUse"/><linearGradient x1="26.5" y1="34.25" x2="26.25" y2="43.572" id="g" xlink:href="#c" gradientUnits="userSpaceOnUse"/><linearGradient id="c"><stop offset="0" stop-color="#edd400"/><stop offset="1" stop-color="#edd400" stop-opacity="0"/></linearGradient><linearGradient id="b"><stop offset="0" stop-color="#c4a000"/><stop offset="1" stop-color="#c4a000" stop-opacity="0"/></linearGradient><linearGradient id="a"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><radialGradient cx="24.837" cy="36.421" r="15.645" fx="24.837" fy="36.421" id="f" xlink:href="#d" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 .53672 0 16.873)"/><linearGradient x1="17.061" y1="11.395" x2="12.624" y2="12.584" id="i" xlink:href="#e" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -1.17193 1.17193 0 1.783 54.101)"/>
....
  </defs>
    <symbol id="osa_arrow_green_left" viewBox="0 0 100 100">
      <title>osa_arrow_green_left</title>
      <path d="M40.482 36.421c0 4.638-7.005 8.397-15.645 8.397s-15.645-3.76-15.645-8.397c0-4.637 7.005-8.397 15.645-8.397s15.645 3.76 15.645 8.397z" transform="matrix(4.07042 0 0 -2.73573 -37.407 201.167)" opacity=".141" overflow="visible"/><path d="M38.375 45.034c-40.026 1.322-33.7-32.74-12.88-32.536V3.122L42.143 17.71 25.495 33.006v-9.668c-14.063-.586-18.178 21.433 12.88 21.696z" display="block" overflow="visible" transform="matrix(2.73231 0 0 2.73231 -2.851 -4.61)"/><path d="M16.925 39.316c-11.723-6.08-8.188-26.229 9.584-25.766v-8.1l14.047 12.265L26.51 30.659V22.38c-14.84-.348-14.16 12.758-9.584 16.935z" opacity=".699" stroke-miterlimit="10" display="block" overflow="visible" transform="matrix(2.73231 0 0 2.73231 -2.851 -4.61)"/><path d="M26.037 4.569l10.687 10.23c-6.938 0-4.687 8.936-10.812 11.811l.062-3.666c-15.187-.063-14.312 15.5-3.25 19.75C3.636 37.812 6.287 13.38 25.912 12.88l.125-8.312z" opacity=".494" overflow="visible" transform="matrix(2.73231 0 0 2.73231 -2.851 -4.61)"/>
    </symbol>
...
    </symbol></svg>

I will try adding a few icons manually to a document in Inkscape, convert them to symbols and see what the resulting XML looks like...

[njh]

Here are 10 OSA icons put together in Inkscape: https://gist.github.com/njh/5fcef2b5037bd0be8691d5ad4cb052ac

Importantly, it looks like Inkscape has added -2 to the end of the <linearGradient> ids, to ensure that they are unique.

I could just put the 74 OSA icons (after optimisation using svgo) together in a document manually? What should I be careful of?

[Xaviju]

You should create a sprite of SVG symbols. I'd recommend you to use icomoon since is a GUI tool for creating SVG sprites. https://icomoon.io/

You can check the template SVG an ensure that your SVG sprite has all the required information https://github.com/Xaviju/inkscape-open-symbols/blob/master/template.svg

Common recommendations are

1. Remove all fill and stroke attributes from your inline SVGs if you want its color to be editable. If the color is required, do not remove any of those attributes.
2. Add the style attribute at the SVG tag to ensure that the icons are displayed correctly
3. Remove all the style attributes from the symbols unless required to be displayed.

I think that's all. If you create a set please PR and I check the code :)

[njh]

Thanks, I will give it a go.

[njh]

I had a go with icomoon.io (very nice tool!). Unfortunately it seems to have lost the gradients (and most of the colours), along with some of the image detail:

https://www.aelius.com/njh/tmp/osa-icons-icomoon/demo.html

(compare to the originals here: http://www.opensecurityarchitecture.org/cms/library/icon-library)

Unless you have any other ideas, I think I will have a go at putting them together manually Inkscape and then tidying up the XML by hand.