HowTo: Editing Figures
Note: To quickly edit any text content, open the svg in a text editor and edit the text directly. In most cases, the resulting svg will look fine. If it doesn't look exactly how you like, then use Draw.io (see below).
SVG figures are created using the free tool, draw.io.
To import and edit one of the SVG figures, follow these steps:
- Open draw.io in the browser.
- Upload the SVG you would like to edit using one of the following methods:
-
if this menu appears when you open draw.io, then select
Open Existing Diagram, and upload the SVG
-
if that menu doesn't appear, upload the SVG by clicking
File -> Import from -> Device
-
All figures currently have the following formatting (this could be out of date):
- Figure text font: Garamond
- Figure text header size: 20 non bold
- Figure text header color: black
- Figure text description size: 16 non bold
- Figure text description color: 666666
- Width should be no more than 960px as that is the width of the content on the jekyll site at the moment
To export the SVG after you have made changes, follow these steps:
- Select all elements (either by click and drag or
Cmd+a) - Click
File -> Export as -> SVG...
- Select
Transparent Background,Selection Only -> Crop,Include a copy of my diagram, the clickExport
- Usually, the file you exported will be saved to
Downloads. Replace the original SVG with the new SVG, the commit the changes to master.
Icons used in the figures can be found on draw.io by typing in the desired object (for example "tower server") into the search bar on the left toolbar and progressing through "More Results".
Often, we want the Simulation app to change elements of a figure when the user changes simulation input values. This is done "by hand", by adding tags in the .svg file, where "xxx" can then be used in the Javascript to modify the span content on-the-fly.