Linking Generic SVGs to Color Pickers

March 13, 2017

It's remarkably easy to use SVG images in SimpleDiagrams. Just drag your SVG from your desktop (or wherever it's stored) directly into your diagram and off you go.

The problem a generic SVG file, however, is that it doesn't have information in it to let SimpleD know which part of the image should be colored with the "stroke" color chip and which should be colored with the "fill" color chip.


Example of fill and stroke color chips in SimpleD.

But now, SimpleDiagrams V4 users, it's super easy to link that generic SVG image to a color chip in SimpleDiagrams. 


Creating Color Picker Links

When you drag in any ol' SVG image, SimpleD will look for information about how to color fills and strokes. If it doesn't seen any, it shows a new "link" icon on the fill and stroke color chips, which indicates to you that you can link the shape's fills to the fill color and strokes to the stroke color.

Why not do this automatically, you ask? Because often you *don't* want to link the color, as it will remove all the various colors from a multi-colored SVG and replace it with just one color. This often isn't what you want, at least with complex SVGs with lots of colors (like a cartoon face).

With simple, monochrome SVGs, however, you probably do want to the link the color. Now you can! 

Let's find a simple SVG for an example. IconFinder.com is a great resource for finding SVG icons, especially simple ones that work well in SimpleDiagrams. Just make sure you follow all license guidelines for each SVG you purchase. IconFinder did a good job making these pretty simple to understand. 

(I recommend IconFinder's Pro plan if you need a lot of SVGs for your work. Disclaimer: I'm signed up as an affiliate for IconFinder, but only because I really like their stuff and use it in my own products, and am considering intergrating it directly into SimpleD someday.)

For this example, I purchased this nice icon from Juraj Sedlak's Beekeeping at the Garden icon set on IconFinder.com and downloaded the SVG file.




Getting that SVG into my simple diagram is a piece of cake. I just drag it directly into my diagram where I want it placed.

However, as I mentioned above, this SVG doesn't have any SimpleDiagrams-specific info about colors. So I can't color it. Which is crap because I want to change it's color. Thank heavens I'm using SimpleD version 4, as I can see the new link icons in the color chips. 


Image showing link buttons in color chips when editing an imported SVG.


Now, some SVG creators will create icons like this as strokes, and some as fills, so you'll have to figure out which color chip to link. In this case, the SVG is created with fill elements, so when I link the fill color chip, I'm able to update the color and even texture:


Example of generic SVG with applied color and texture

Pretty cool huh? This should help out some of you who have been waiting for more networking and systems architecture shapes from me! (Although I did just release the Google Cloud library, and an Amazon Web Services library is coming soon!)