This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
svg_files [2018/04/11 12:30] rsewikiadmin created |
svg_files [2021/12/14 14:13] (current) arusso |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | Files are located in an RPC-managed space: https://www.rfc-editor.org/materials/ | + | **NOTE: This page has been replaced by https://authors.ietf.org/diagrams** |
- | Tools used to generate | + | ===== SVG Samples and Notes from Experience ===== |
+ | |||
+ | The schema in use for SVG in RFCs is [[https:// | ||
+ | |||
+ | ====Examples==== | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * Additional samples are here: https:// | ||
+ | |||
+ | ====Tools that can be used to generate | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * Note: There' | ||
+ | * Here's [[https:// | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
* [[https:// | * [[https:// | ||
- | * [[https:// | + | * [[https:// |
+ | |||
+ | ==== Creating SVG diagrams: Some notes from experience ==== | ||
+ | |||
+ | === from Nevil Brownlee (July 2018) === | ||
+ | |||
+ | The version of SVG that will be allowed in RFCs is described in [[https:// | ||
+ | |||
+ | As one of the tools for using SVG 1.2 RFC, we have produced [[https:// | ||
+ | |||
+ | Many people have asked for advice about how best to create SVG diagrams; in this note I summarise my experiences of doing that. To start with, Wikipedia has a good survey of both Open Source and Proprietary | ||
+ | packages at [[wp> | ||
+ | |||
+ | === Inkscape === | ||
+ | |||
+ | Of the Open Source packages, in my opinion Inkscape is the best of them. It's a big package, though, with many features, so there' | ||
+ | Note, however, that **SVG 1.2 RFC only allows objects that are part of black-and-white line drawings.** | ||
+ | |||
+ | Again, Inkscape uses markers for line-end symbols (even if you create your own markers using Object -> Objects to Marker). | ||
+ | |||
+ | Another nice feature of Inkscape is that its ' | ||
+ | |||
+ | [[https:// | ||
+ | |||
+ | === LibreOffice Draw === | ||
+ | |||
+ | This is good if you're used to LibreOffice, | ||
+ | |||
+ | Create your drawing using Draw, group it into a single object, then export it. (For me, that makes an SVG diagram that emacs and Inkscape display properly, but Firefox donesn' | ||
+ | |||
+ | === Dia === | ||
+ | Runs on Windows, OSX, GNU/Linux and Unix. Install it from http:// | ||
+ | |||
+ | Dia is simple to use. Save your drawing as xxx.dia, then export it as xxx.svg. | ||
+ | |||
+ | Dia draws line-end arrowheads as filled polygons, and it doesn' | ||
+ | |||
+ | === Proprietary Applications === | ||
+ | |||
+ | If you're familiar with Adobe Illustrator, | ||
+ | |||
+ | ------- | ||
+ | |||
+ | === from Don Fedyk (April 2021) === | ||
+ | |||
+ | If you have black and white diagrams in PowerPoint these can be copied and pasted into Inkscape. You can resize and position on Inkscape' | ||
+ | |||
+ | The plain SVG will have: | ||
+ | < | ||
+ | width=" | ||
+ | height=" | ||
+ | viewBox=" | ||
+ | </ | ||
+ | |||
+ | (or whatever your starting size was) | ||
+ | |||
+ | It is easier to make Inkscape drawing size close to the dimensions you want before saving. For a 1/2 page drawing a full page may be used and the height can be adjusted, but sometimes the conversion will complain and the height/ | ||
+ | |||
+ | Editing the basic svg: | ||
+ | |||
+ | You will need to remove clipPath and metadata (it will probably look something like this): | ||
+ | < | ||
+ | < | ||
+ | id=" | ||
+ | < | ||
+ | id=" | ||
+ | < | ||
+ | x=" | ||
+ | y=" | ||
+ | width=" | ||
+ | height=" | ||
+ | id=" | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | id=" | ||
+ | < | ||
+ | < | ||
+ | rdf: | ||
+ | < | ||
+ | < | ||
+ | rdf: | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | The basic svg has some identifiers that must be removed: | ||
+ | < | ||
+ | font-weight | ||
+ | font-family | ||
+ | style=" | ||
+ | </ | ||
+ | |||
+ | The font-related ones can usually be deleted by deleting the whole line. The style one is part of a tspan tag and you must only remove the text. These VIM command line commands do it properly: | ||
+ | |||
+ | < | ||
+ | : | ||
+ | : | ||
+ | : | ||
+ | </ | ||
+ | |||
+ | At this point you can test the SVG either by including and running it in xml2rfc or using the SVG tester but xml2rfc catches more issues so I skip the tester. Rendering: | ||
+ | '' | ||
+ | |||
+ | Another issue is with < | ||
+ | Sometimes the physical text is between ''< | ||
+ | and sometimes it is between ''< | ||
+ | It might put the text between the tspan and text tags:\\ | ||
+ | ''< | ||
+ | And you need to correct it by either moving the text or deleting the tags. | ||
+ | The xml2rfc --pdf will complain about this. Simply moving the text inside the tspan tags works.\\ | ||
+ | ''< | ||
+ | Usually there are coordinates within the text and tspan tags - you want to keep those. Another issue is the coordinates of the text can cause the characters to overwrite in different tspans.\\ | ||
+ | ''< | ||
+ | |||
+ | Positioning: | ||
+ | The ViewBox has x-min y-min | ||
+ | < | ||
+ | x=" | ||
+ | </ | ||
+ | |||
+ | For a half page drawing from the original: | ||
+ | < | ||
+ | width=" | ||
+ | height=" | ||
+ | viewBox=" | ||
+ | x y w% h% | ||
+ | </ | ||
+ | |||
+ | The height controls the whitespace; if your drawing is 1/2 page you can usually reduce by 1/2 and it will only take 1/2 a page. Inch-based dimensions were harder to work with, and width and height had to be removed, but with mm dimensions | ||
+ | |||
+ | Adjusted for 1/2 page it might look like this: | ||
+ | |||
+ | < | ||
+ | width=" | ||
+ | height=" | ||
+ | viewBox=" | ||
+ | </ | ||
+ | |||
+ | Note that the x dimension is unchanged; also, in my experience, the scaling is far from linear. A slightly large diagram needed these values but the difference from 50 to 30 on the veiwBox height was hardly noticeable. | ||
+ | |||
+ | < | ||
+ | width=" | ||
+ | height=" | ||
+ | viewBox=" | ||
+ | </ | ||
+ | |||
+ | The scaling is constant whether the drawing is at the top or following other drawings. Two pictures easily fit with captions on a page using this. |