3
Step 1.1: Create and Number Your Grid
Layers: 2 (Layer 1, Numbers)
Scroll down for written instructions.
- Create a 10 x 10 grid and set it to 18px square.
- Render > Cartesian Grid
- Set as follows:
- Major X Divisions: 10
- Major X Division Spacing: 18
- Major X Thickness: 1
- Major Y Divisions: 10
- Major Y Division Spacing: 18
- Major Y Thickness: 1
- All Subdivisions: 1
- Border Thickness: 2
- Click Apply and close.
- Zoom in to 286%.
- Create the first two guides.
- Click on the horizontal ruler, hold, and drag to create your first horizontal guide. Drag the guide until it is in the middle of the top border on your grid.
- Double click the guide and edit the “Y:” to the nearest whole number. Note the number. (Ex. 664)
- Adjust it so it is 1/3rd from the top of your square. (Edit the value. Don’t eyeball!)
18/3 = 6 br>
664 – 6 = 658 - Click on the vertical ruler, hold, and drag the guide until it is flush with the outer left edge of your grid.
- Double click the guide and edit the “X:” to the nearest whole number. Note the number. (Ex. 284)
- Offset by 4 px left. (Ex. 280)
- Create a Layer.
- Layer > Layers
- Click the green +.
- Create “numbers” below the current layer, which contains the grid.
- Click the lock symbol next to Layer 1 (the grid layer).
- Click numbers to select it
.
- Check your number position.
- Click the A in the left toolbar.
- Select Arial and set it to 12. Click the Right Align. (Note: Numbers on the left are always aligned right. Numbers on the right are always aligned left.)
- Click outside your grid and type “10″.
- Drag the 10 to the intersection of your two guides and watch it snap in place. If it doesn’t snap, go to View and click snap. Then try again.
- Eyeball the 10. Is it roughly in the center of the row and offset from the edge enough that it is legible? If no, adjust your guides. (Don’t forget to edit the values to whole numbers.) Then move your text until it looks right to you.
- Create horizontal guides 1/3rd from the top of each row. (I do mine with a calculator while I work.)
- Create the guide for the stitch numbers.
- Click on the horizontal ruler, hold, and drag the guide until it is flush with the outer bottom edge of your grid.
- Double click the guide and edit the “Y:” to the nearest whole number. Note the number. (Ex. 479)
- Offset by 4 px down. (Ex. 280)
- Create the guide for the right row numbers.
- Click on the vertical ruler, hold, and drag the guide until it is flush with the outer left edge of your grid.
- Double click the guide and edit the “X:” to the nearest whole number. Note the number. (Ex. 276)
- Offset by 4 px right. (Ex. 280)
Related Posts:
3
My First Cable Chart
Before you begin, you will need the following:
- calculator (preferably hand-held).
- Aire River Knitting Symbols Font (or another font without grid lines around the symbols).
- a draft of your chart.

Although this technique can be used to explore cables, it is best used for creating final drafts, meaning you already have a 1st draft of your chart before you open Inkscape.
Unlike the previous sections of the Knitter’s Guide to Inkscape, this is a lesson, complete with videos and how-tos. I thought about quizzing you, but decided not to under the assumption you will be working along with me. Comments, tips, and suggestions are welcome and appreciated. If you have questions, please post them as a comment as others may have the same question you did. I may email you privately for more details, so please use a valid email address in your comment. (I’m the only one who can see it.)
Always save after every step and while you’re working.
Steps:
- Create and Number Your Grid:Â Layers: 2 (Layer 1, Numbers)
- Quick Sketch the Cable Fronts:Â Layers: 3 (Layer 1, Numbers, Line)
- Add Your Purl Stitches:Â Layers: 4 (Layer 1, Numbers, Line, Purls)
- Add Your Cables:Â Layers: 5 (Layer 1, Numbers, Line, Purls, Cable)
- Make Your Chart Pretty:Â Layers: 6 (Layer 1, Numbers, Line [invisible], Purls, Cable, bg)
- Add a Key and a Title:Â Layers: 7 (Layer 1, Numbers, Line [invisible], Purls, Cable, bg, key)
- Finalize and Use.:Â Layers: 7 (Layer 1, Numbers, Line [invisible], Purls, Cable, bg, key)
What is…
Layer
Think about peeling an apple vs. peeling an onion. An apple has everything on the surface. Once you peel it, all you have left is the core of the fruit. Onions, on the other hand, peel apart in edible layers and you can see the next layer through the one on top. Layers in Inkscape (or any graphics program for that matter) are like onions. It is a series of images stacked one on top of the other. If you delete one layer, you still have the rest of your picture.
In charting, we use separate layers for nearly everything. Each stitch type, the grid, background, numbering, and key have their own layer. Why? Because turning the visibility (the little eyeball symbol beside the layer name in Layer > Layers view) and locking them so we can’t accidentally move things we’ve already finished is both a time and a sanity saver

Guide
A guide is a non-printing element used to align printing elements. So all the blue lines you see in Inkscape…you won’t see them in the final version.
Cable Front
This is the non-technical term, I use to refer to the knitted stitches that cross over the front of the fabric. It is particularly important because what charted cables actually show is what crosses over the front. The back stitches meet the front and the front continue while the back disappear.

Stitch Type
Each individual symbol is a stitch type. For example, purl is different from make 1 right. When you work, work all purl stitches in their own layer. Then, work all of each additional stitch type in a separate layer intended for that stitch type. Why? Because different fonts have different kerning (the amount the font hangs over the edge of the block). This is particularly true for knit fonts. And knit fonts also don’t have fixed character widths either. This means you may need to adjust your vertical guides for each stitch type.
SVG
SVG stands for scalable vector graphic. It is a scalable image that will not degrade regardless of how big or small you make it. They are a recommended web format and are considered superior to other image standards. There is some debate as to whether svg are superior to Adobe’s .ai format. I’ve personally never noticed a difference in appearance, but consider this. Open a layered svg file in Illustrator and it is still a layered svg file. Open a .ai file in nearly any program except those created by Abode and it’s flat. From an interoperability perspective, I consider svg superior because I know I can send to someone and they will be able to open and edit it without purchasing an expensive software suite.
Don’t rush to convert your graphics to SVGs yet. It’s no surprise that Internet Explorer does not include SVG support. However, SVGweb http://code.google.com/p/svgweb/ can add support for your website, but it’s not always perfect. Stick with pngs for the near future.
Related Posts:
About Me
Words are my paintbrush. I've published technical articles and several small blips of fiction. An avid reader since age four, my sister once accused me of reading the words off the cereal box. Now, I can't imagine life without books and writing. With my Kindle in hand, I'm making my way through a long list of indy authors with a few traditionals thrown in for fun. Book reviews, baking tips, bread pictures, knitting, my latest computer meltdown/headache, relevant software reviews, rants about useless products and/or stupid politicians, odes to oolong tea...no topic's off limits.
My interesting, but rarely used education:
- BA Political Science; UGA 2004
- BA International Affairs; UGA 2004
- MA International Commerce and Policy; George Mason 2008
Book List
Recent Posts
Tweets
- I just picked up my new glasses. I can SEE, again! 2011-05-04
- Kristle: 5; Spiders: 0 2011-05-03
- After 7 years, I've learned the secret to giving my dog pills...Velveeta! 2011-05-03
- @nuckles13 No. I'm writing a fiction book formatting manual. 2011-05-02
- What symbols do you like using for scene breaks? So far, I have ***, #, and the infinity symbol. 2011-05-02
- More updates...
Powered by Twitter Tools








