├── Readme.md
└── Readme
├── A parametric attribute.png
├── Drawing a circle.png
├── Inkscape greets you.png
├── Saving your drawing.png
├── The XML editor.png
└── The parametric namespace.png
/Readme.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | Creating a parametric SVG
4 | =========================
5 |
6 | There are many ways to create a *parametric.svg* graphic. If you’re a designer or office person, you’d probably like to draw your things first and attach the parametric stuff later on. You’re in the right place – read on! If you’re more of a coder and want to hand-craft your SVG markup, you can skip right over to our [online editor][].
7 |
8 | You can make a parametric drawing in any SVG editor. There’s a fabulous free open-source one called [Inkscape][] – that’s what we’ll be using in this tutorial. Head over to [download][], install and start Inkscape. Come back when it’s up and running. We’ll still be here when you come!
9 |
10 | ***
11 |
12 | Congratulations! Here’s what Inkscape v0.91 greets me with on a Linux machine. You probably see a similar window:
13 |
14 | 
15 |
16 | If you’ve ever fiddled with Adobe Illustrator, Corel Draw or even Microsoft Paint, I bet you feel right at home. Creating drawings in Inkscape is really easy.
17 |
18 | Off we go then! Let’s start with something simple – we don’t want to make our first drawing too complicated. A circle is a good start. Just make sure you hold down CTRL while drawing – otherwise you’ll end up with an egg-like shape.
19 |
20 | 
21 |
22 | Well done! Our circle is a plain static SVG element. Let’s make its radius parametric! Inkscape ships with an XML editor – the perfect tool to get the job done. Let’s select the circle and pick the tool *Edit → XML Editor…* from the top menu.
23 |
24 | 
25 |
26 | > ### 💡
27 | >
28 | > You can add, edit and remove parametric attributes right inside Inkscape using the built-in *XML Editor*.
29 |
30 | We’re greeted by a window split in two parts. On the left side there is a tree-like structure listing all elements in our drawing. On the right there are attributes of our circle. That’s what we’re interested in!
31 |
32 | Under the list of attributes we have two input fields – one for setting the name of an attribute, the other for setting its value.
33 |
34 | Right – let’s get our job done. We wanted to make the radius of our circle parametric. To do that let’s select the attribute `r` in the right pane – and change its name to `parametric:r` in the input field below.
35 |
36 | 
37 |
38 | > ### 💡
39 | >
40 | > Whenever you want to make an attribute parametric, just add the namespace prefix `parametric:` to it.
41 |
42 | That’s our first parametric attribute! Put something like `3 * (a + 50)` in the field below. Our regular `r` attribute could only have a static value like `157.7027` – but
43 | in our `parametric:r` we use any mathematical expression.
44 |
45 | > ### 💡
46 | >
47 | > The value of a parametric attribute can be virtually any [mathematical expression][]. It can also contain [variables][] and [strings][].
48 |
49 | Now comes the big moment. Click the button *Set* or hit CTRL + ENTER on your keyboard to set the attribute! Hold your breath, and—
50 |
51 | nothing happened?
52 |
53 | No worries. Inkscape doesn’t understand parametric attributes yet – it’s quite a new idea. In the next section we’ll learn how to use a web-based editor to pass variables to our parametric graphic and render the thing.
54 |
55 | You may have noticed that by adding the `parametric:` prefix we created a new attribute. The original `r` attribute we had selected stayed how it was – Inkscape didn’t replace it. We wouldn’t want that – the plain old `r` attribute is our fallback value. It will be used by Inkscape and other SVG viewers which don’t understand the *parametric.svg* format.
56 |
57 | > ### 💡
58 | >
59 | > Any parametric attribute should have a static fallback – an attribute without the `parametric:` prefix.
60 |
61 | If you feel like it, you can set other parametric attributes on the circle. How about setting `parametric:style` to `` `stroke: charcoal; stroke-width: ${2 * 3}` ``? Don’t worry if you don’t know exactly what it means. You can read up on our [specs][] later.
62 |
63 | There’s one more thing we need to do before we close Inkscape. The `parametric:` prefixes we’ve been talking about should belong to an XML namespace. To make sure our file will open in every SVG viewer, we need to declare the namespace upfront. Click the topmost `` element on the left side of the XML editor (it might as well be called `