Inkscape SVG Button
This is a part of a mini series, I divided it because it straddles the realm of development in the following parts (wordpress shortcodes, conditional loading of scripts, ajax, even base64 encoding!). This is quite a soup! Javascript, PHP, CSS, HTML, but it starts at the heart (literally), a cross hatched design made of vectors through one of my favorite content creation programs, Inkscape. I suppose you could make the argument that inkscape is the free version of Illustrator.
We start with the “image” file which in reality is a text file, the XML markup protocol developed by the W3C and as a text file can be searched, indexed, scripted, compressed, and encoded! Now that might be better served in the “development” category.
The reason why I chose this is because it’s practical (I use it on Elementarray), although as a whole it is complicated with a variety of technologies, it’s pieces are simple, and the concept in its entirety is a valuable teaching tool in regards to putting ideas into use.
Open up Inkscape, let’s get to the heart of the matter. Practice gettng a workflow going, hopefully some of the instructions/commands in this post will help you get into an efficient and organized mode. What I like with Inkscape (and Gimp also) are the grids and guides, the ability to snap to them (or not) as well as to make this a part of your default setup. Maybe that is a good idea for an altogether separate post, how to setup a “default” work area. You don’t think so? Well how do you open a default document from Inkscape? See, I know how, and you should too… and you will! Stick arround, because, in regards to workflow, I’ll show you how to use the XML editor of Inkscape, that’s real enlightenment! Not to mention you should be using keyboard shortcuts (workflow efficiency)… all for another time… except I will give you keyboard shortcuts with the commands in this post! You may think some of this is overkill, and it maybe, I’m trying to give you the tools and methods to continue on and succeed with bigger and or more complicated projects!
Time to make the “heart” object! Keep your page the size of the object we will make (file->document properties: 40px x 40px) this will help you when aligning things, or managing the page/drawing view.
Use the "Bezier Curve" tool 4 nodes: 1 - x:20,y:5 (top middle) 2 - x:0,y:13 (left side) 3 - x:40,y:13 (right side) 4 - x:20,y:40 (bottom) "fill & stroke" panel (Ctrl+Shift+F) stroke:0.1 fill:X color:#000000ff
Use View->Zoom->Page (to get refocused) when needed…
View->Guides, and View->Page Grids. Once those are on, you can edit them if necessary in File->Document Properties->”Grid” Tab: adjust “Major grid line every:” to suit your needs. Turn on guides & grids. Select all nodes. Use selected nodes smooth, and then immeadiately selected nodes symmetric.
- Make 2 layers: “base” & “extra”
- Duplicate object: Cut & Paste (Ctrl+X, CtrL+P) object into layer “base” and also into layer “extra”
- You can hide layers if you need to – (“eye” icon) on the “layers” panel
“Align & Distribute” panel (Ctrl+Shift+A) You will most likely need to center/align the drawing in the page for each layer
- Select object on “extra” layer
- “+”->”hatch”
- (use node tool to adjust control nodes, which are on the page/drawing, 2 circles and 2 diamonds, to modify spacing, direction and bending of hatches)
- Select object on “base” layer
- “+”->”sketch”
- (this time use the dialog box, not the node tool, to adjust the input)
Save as plain svg! This eliminates things like “sodipodi poopie doopie….” in the xml (the markup language of the file). If you want to see this markup you can open the svg file with a text editor. You can also use the Inkscape built in XML editor “XML Editor” panel | “Edit”->”XML Editor” | (Ctrl+Shift+X). Using a text editor is handy for other tasks another day if you have search/replace capabilities, all part of increasing workflow efficiency!
