-
Notifications
You must be signed in to change notification settings - Fork 0
/
02-image.Rmd
185 lines (95 loc) · 11.2 KB
/
02-image.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
# Creating an Infographiq image {#image_creation}
Infographiq works with vector-based images that are set up in a very specific way. Here we provide instructions for two vector graphics packages: [Adobe Illustrator](https://www.adobe.com/products/illustrator.html) (requires a paid subscription) and [Inkscape](https://inkscape.org/) (free).
You'll also need the example folder for Infographiq, which provides a full working example that you can fiddle around with. We'll be referring to this folder extensively in this guide and you can [download a compressed version here](https://marinebon.github.io/infographiqJS/infographiq_example.zip). Just unzip the folder when you get it.
You can see the working example [in action here](https://marinebon.github.io/infographiqJS/infographiq_example/infographic.html).
## Adobe Illustrator {#illustrator}
This guide assumes you have a basic knowledge of using Illustrator ([here is a great series of tutorials](https://helpx.adobe.com/illustrator/tutorials.html)). In particular, you'll need to understand how layers work in Illustrator (and [here's a tutorial](https://helpx.adobe.com/illustrator/using/layers.html) for that).
In the Infographiq example folder, you'll find a file called illustrator_example.ai. Open this file in Illustrator and you'll see the following:
If you check out the Layers tab for the image, you'll see that the image is composed of three layers:
This is the required layer order of an Infographiq image.
### Layer organization {#illustrator_layers}
1. text: This first layer is optional and, if present, must be called lower case "text". This layer contains additional explanatory text and graphics for the image that the Infographiq Javascript can toggle on and off. To see this in action, click the "Text in image" button in the upper right of our [Infographiq example](https://marinebon.github.io/infographiqJS/infographiq_example/infographic.html).
In the Layers panel, we can see that the "text" layer contains several elements:
There are three essential things here:
A. All of the elements are vector-based (nothing raster-based). If you happen to have raster-based elements in your image (or are not sure), we can tell you what to do about it in this section of this document: [dealing with raster-based elements](#illustrator_raster).
B. None of the elements within this layer are named "text". The following (where one of the elements is named text) is not allowed:
C. Double check that the font you select for the text elements displays well in a browser. The default font for Illustrator is often "Myriad Pro", which does not display well. There are many great alternatives, with one being "Arial".
2. icons. The second layer is required and contains all of the clickable elements in the image. This layer can be named anything, except for "text" or the name of any clickable element in the image.
If you check out the Layers panel for "icons", you'll see that it contains six sublayers (chartexample1 through 6):
Each of these sublayers defines a single clickable component of the image.
- The names of these sublayers should not contain spaces, commas, or be called "text".
- All elements within the sublayers should be vector-based and not raster-based. If you happen to have raster-based elements in your image (or are not sure), we can tell you what to do about it in this section of this document: [dealing with raster-based elements](#illustrator_raster).
- Nothing should overlap on top of anything you want to be clickable.
- Each sublayer contains all of the elements for a single clickable icon.
- The elements in the sublayer, if named, should not have the same name as the sublayer itself. So, for example, the following won't work (the element within chartexample1 is also called chartexample1):
3. background_elements: an optional layer that contains all non-responsive elements of the image. This layer can be called anything (other than "text" or the name of a clickable sublayer). It is ignored by the Infographiq Javascript.
### Dealing with raster-based elements {#illustrator_raster}
**How do I tell if something is raster or vector-based?**
One dead give-away that an image is raster-based is if the file is saved in a raster-based file format. You can determine the file format of a file by checking out the last few characters of the file name (the file extension). Some common raster-based file formats are (with their extensions):
- .gif (Graphic Interchange Format)
- .jpg or .jpeg (Joint Photographic Experts Group)
- .png (Portable Network Graphics)
- .psd (Photoshop Document)
- .tiff (Tag Image File Format)
Checking the file extension isn't a fool-proof system though. Just because an image is saved in some other format than those above doesn't mean that it isn't a raster-based image. So, how can you know for sure? Well, open the image up in Illustrator and take a close look at the Layer panel. If the image is raster-based, it will say `<Image>` under the appropriate layer (be sure to click the arrow just to the left of the layer name to see what it contains). See below for an example:
**Converting a raster to a vector**
If you have some raster-based elements that you'd like to include in your Infographiq image, Illustrator has got you covered. You'll just need to convert those elements into vectors and here's how to do that:
1. Select image (from Layers; or Select All from menu).
2. From the menu, select Object \> Image Trace \> Make and Expand.
3. Delete (trash icon in Layers menu) or Unite/Merge (in Pathfinder menu) the selected layers until you achieve the desired simplified icon result.
### Saving the image {#illustrator_saving}
To be used by Infographiq, the file must be exported in svg format. To do so:
1. From the menu, click: File \> Export \> Export As.
2. In the following screen, select svg format. Be sure to click "Use Artboards".
3. In the final screen that pops up, be sure to set Object IDs to "Layer Names", as follows:
4. The default for Illustrator is to add an "01" to your svg file name (so, "example.svg" becomes "example01.svg". Change the file name back to your desired choice.
## Inkscape {#inkscape}
This guide assumes you have a basic knowledge of using Inkscape ([here is a great series of tutorials](https://inkscape.org/learn/tutorials/)). In particular, you'll need to understand how layers work in Inkscape (and [here's a tutorial](https://roy-torley.github.io/Inkscape_Tutorial/Tutorial06/Tutorial06.html) for that).
In the Infographiq example folder, you'll find a file called inkscape_example.svg. Open this file in Inkscape and you'll see the following:
If you check out the Layers panel for the image, you'll see the following:
This is the required layer order of an Inkscape image.
### Layer organization
1. text: This first layer is optional and, if present, must be called lower case "text". This layer contains additional explanatory text and graphics for the image that the Infographiq Javascript can toggle on and off. To see this in action, click the "Text in image" button in the upper right of our [Infographiq example](https://marinebon.github.io/infographiqJS/infographiq_example/infographic.html). The essential thing here is that all of the elements are vector-based (nothing raster-based). If you happen to have raster-based elements in your image (or are not sure), we can tell you what to do about it in this section of this document: [dealing with raster-based elements](#inkscape_raster).
2. icons. The second layer is required and contains all of the clickable elements in the image. This layer can be named anything, except for "text" or the name of any clickable element in the image. If you check out the Layers panel for "icons" (see image just above), you'll see that it contains six sublayers (chartexample1 through 6). Each of these sublayers defines a single clickable component of the image.
- The names of these sublayers should not contain spaces, commas, or be called "text".
- All elements within the sublayers should be vector-based and not raster-based. If you happen to have raster-based elements in your image (or are not sure), we can tell you what to do about it in this section of this document: [dealing with raster-based elements](#inkscape_raster).
- Nothing should overlap on top of anything you want to be clickable.
- Each sublayer contains all of the elements for a single clickable icon.
3. background_elements: an optional layer that contains all non-responsive elements of the image. This layer can be called anything (other than "text" or the name of a clickable layer). It is ignored by the Infographiq Javascript.
### Editing the layer XML {#inkscape_XML}
In order for the Infographiq image to behave properly, you will need to edit the XML for the image. In order to do so, you'll need to have two panels visible:
1. Layers (to show from Menu, Layer \> Layers...)
2. XML Editor (to show from Menu, Edit \> XML Editor...)
Let's zoom in on these panels for the image inkscape_example.svg:
For each of your layers:
1. Click the associated entry in the XML Editor (hint: the "inkscape:label" will match the layer name).
2. In the box to the right, change the id to match the layer name.
3. Select the "text" layer in the XML Editor. In the box to the right, click the red X by "display: inline" (thereby deleting that row). Note: in the example file inkscape_example.svg, the "display: inline" line has already been deleted.
### Dealing with raster-based elements {#inkscape_raster}
**How do I tell if something is raster or vector-based?**
One dead give-away that an image is raster-based is if the file is saved in a raster-based file format. You can determine the file format of a file by checking out the last few characters of the file name (the file extension). Some common raster-based file formats are (with their extensions):
- .gif (Graphic Interchange Format)
- .jpg or .jpeg (Joint Photographic Experts Group)
- .png (Portable Network Graphics)
- .psd (Photoshop Document)
- .tiff (Tag Image File Format)
Checking the file extension isn't a fool-proof system though. Just because an image is saved in some other format than those above doesn't mean that it isn't a raster-based image. So, how can you know for sure? Well, open the image up in Inkscape and right click on it. If in the options you see "Image Properties...", you've got a raster-based image on your hands (see image below).
**Converting a raster to a vector**
If you have some raster-based elements that you'd like to include in your Infographiq image, Inkscape has got you covered. You'll just need to convert those elements into vectors and [here's a tutorial](https://inkscape.org/doc/tutorials/tracing/tutorial-tracing.html) on how to do that.
### Saving the image {#inkscape_saving}
To be used by Infographiq, the file must be exported in svg format. Good news! Inkscape's native file format is already svg. When you save the image, just be sure to save it in the format "Inkscape SVG (\*.svg)".