====== SVG images in DokuWiki ====== SVG Logo Designed for the SVG Logo Contest in 2006 by Harvey Rayner, and adopted by W3C in 2009. It is available under the Creative Commons license for those who have an SVG product or who are using SVG on their site. SVG Logo 14-08-2009 W3C Harvey Rayner, designer See document description image/svg+xml [[https://www.dokuwiki.org/dokuwiki|DokuWiki]] is a great tool for storing information. DokuWiki is text-based tool allowing users to create tables and format text in different ways. Even with extensive text formatting [[wp>A_picture_is_worth_a_thousand_words|one image is worth more than thousand words]]. Images are even more important for engineers and scientists. Even small images make text much more attractive and easy to focus on. ===== SVG vs raster ===== ==== Raster ==== Naturally DokuWiki allows user to upload raster image onto server and show it inside document. This default mechanism has some disadvantages: * Uploading images involves extra effort from the user. * Images have size much bigger than text. * Raster images cannot be scaled because of lose of quality. * Raster images cannot be easily edited. ==== SVG ==== [[wp>Scalable_Vector_Graphics|SVG]] is relatively new standard (2006) but most commonly used modern web browsers support it. SVG files are based on XML and can be embedded directly into HTML. Below I show few steps/advices on how to create and them embed image into doku wiki page. ===== Steps ===== ==== Preparation ==== This small article does not cover creation of images itself. I recommend using [[http://www.inkscape.org|Inkscape]]. There are numerous tutorials available on how to use Inkscape. ==== Size ==== Image should not be too big nor too small. Images in one page should look similar. The default maximum width of DokuWiki template is 746 [px]. Left and right padding is 28 [px]. I assume usable width as 715 [px] This should reflect on your SVG image size. User can set Inkscape document size by clicking __File__ → __Document Properties__ under __Custom size__. === Oversized === image/svg+xml Text inside SVG 24 Another text 32 Box size: 740 x 283 [px] centered inside 746 x 400 [px] document === Normal size === image/svg+xml Text inside SVG 24 Another text 32 Box size: 690 x 300 [px] centered inside 690 x 300 [px] document Tip: In the Inkscape's __Document Properties__ user can fit document size onto objects size plus custom margins. ==== Clean SVG ==== Instead saving file as SVG in Inkscape I save it as Clean SVG to remove all unnecessary code reducing size. ==== Single line SVG ==== I found very usefull to join all lines of SVG file. This way DokuWiki code is much more readable. I am doing it using [[http://notepad-plus-plus.org/|Notepad++]] and key combination ''Ctrl+J'' (followed by ''Ctrl+C''). ==== Single spaces ==== Notepad++ can also replace double spaces with single ones. Select __Search__ --> __Replace__ and type in __Find what__ field ''([\s]+)([\s]+)''. In the __Replace with__ field put space. Be sure that in __Search Mode__ box __Regular expression__ is selected. Finally press __Replace All__. ==== Embedding in DokuWiki ==== Method I propose does not depend on any plugins. The SVG is embedded directly into HTML. ... ===== Notes ===== * Use only [[http://www.w3schools.com/cssref/css_websafe_fonts.asp|web safe fonts]] * SVG cannot be copied just like raster images * SVG text can be copied * SVG can be extracted from HTML, re-used, re-edited * SVG will look different on different browsers due to different render engines * SVG will look good on print * SVG code can be bigger than raster code