plugin:svgembed
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionLast revisionBoth sides next revision | ||
plugin:svgembed [2019-06-22 01:01] – [Usage] Restless | plugin:svgembed [2023-12-06 21:24] – [svgEmbed Plugin] Restless | ||
---|---|---|---|
Line 2: | Line 2: | ||
---- plugin ---- | ---- plugin ---- | ||
- | description: | + | description: |
- | author | + | author |
- | email : restlessmind@gmail.com | + | email : emb@pobox.com |
type : helper, syntax | type : helper, syntax | ||
- | lastupdate : 2019-06-22 | + | lastupdate : 2021-06-09 |
- | compatible : Greebo | + | compatible : Igor, Hogfather, |
depends | depends | ||
conflicts | conflicts | ||
similar | similar | ||
- | tags : svg, media, images, | + | tags : svg, media, image, images, |
downloadurl: | downloadurl: | ||
- | bugtracker : # eg. http:// | + | bugtracker : https:// |
sourcerepo : https:// | sourcerepo : https:// | ||
donationurl: | donationurl: | ||
- | screenshot_img : | + | screenshot_img : https:// |
---- | ---- | ||
+ | |||
+ | ===== Requirements ===== | ||
+ | |||
+ | PHP 7+ and [[https:// | ||
+ | |||
+ | ==== Compatibility with Igor release candidates ==== | ||
+ | |||
+ | As of this writing (June 27, 2022), this plugin is compatible with the Igor RC2 release without changes. | ||
===== Installation ===== | ===== Installation ===== | ||
Install the plugin using the [[plugin: | Install the plugin using the [[plugin: | ||
+ | |||
+ | |||
+ | ===== Configuration ===== | ||
+ | |||
+ | Under the " | ||
+ | |||
+ | ^ Setting name ^ Description ^ Default value ^ | ||
+ | | **max_svg_width** | ||
+ | | **default_width** | ||
+ | | **default_height** | ||
+ | | **default_print** | ||
+ | |||
+ | See below for discussion about how these values interact with your SVG file for display. | ||
+ | |||
Line 45: | Line 68: | ||
</ | </ | ||
- | The SVG will be placed into your wiki page via an < | + | The SVG will be placed into your wiki page via an ''< |
+ | |||
+ | ==== Arguments ==== | ||
+ | |||
+ | There are a number of arguments you can use. These include: | ||
+ | |||
+ | * [[: | ||
+ | * [[# | ||
+ | * [[# | ||
+ | * [[# | ||
+ | |||
+ | === Formatting === | ||
+ | |||
+ | When you specify a width and height for your image in your media link in the wikitext, it should do its best to render at that size, as long as the width is the same or less than the maximum set for SVG files. | ||
+ | |||
+ | > <code - Example> | ||
+ | {{: | ||
+ | |||
+ | If you do not specify any size information in your media link the SVG file will be inspected to determine the dimensions (subject to scaling if above the maximum width, as above). | ||
+ | |||
+ | * If the '' | ||
+ | * If they are not available but the '' | ||
+ | * If neither is available, the defaults specified in the admin panel is used. | ||
+ | |||
+ | > <code - Example> | ||
+ | {{: | ||
+ | |||
+ | If you specify only a width (as you can for an image) in your media link this actually sets a new maximum width for that embedding of the SVG file only. It will determine the size to render at from the SVG file as above. | ||
+ | |||
+ | |||
+ | > <code - Example> | ||
+ | {{: | ||
+ | |||
+ | |||
+ | === Setting " | ||
+ | |||
+ | If you use '' | ||
+ | |||
+ | There are two options that can be specified for the unit type: | ||
+ | |||
+ | ^ Unit type ^ Notes ^ | ||
+ | | **%** | **Percentage width.** | ||
+ | | **vw** | ||
+ | |||
+ | This tag will use percentage width: | ||
+ | |||
+ | > <code - Example> | ||
+ | {{: | ||
+ | |||
+ | |||
+ | This tag will use the viewport width: | ||
+ | |||
+ | > <code - Example> | ||
+ | {{: | ||
+ | |||
+ | |||
+ | === Additional CSS classes === | ||
+ | |||
+ | You can also add additional CSS classes to your SVG file to change the style on it. You do this with '' | ||
+ | |||
+ | For example, to add the CSS classes '' | ||
+ | |||
+ | > <code - Example> | ||
+ | {{: | ||
+ | |||
+ | |||
+ | === Printing === | ||
+ | |||
+ | Printing of individual SVG files from the page has been implemented. | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ==== Links in SVG files ==== | ||
+ | |||
+ | The SVG file isn't just an image, but rather it's another document. | ||
+ | |||
+ | If you want a link to open full-page, you should specify the '' | ||
+ | |||
+ | **Visio produced SVG files** | ||
+ | |||
+ | You can produce an SVG from Visio however it doesn' | ||
+ | |||
+ | In Visio: | ||
+ | - Draw and save the Visio diagram. | ||
+ | - Add hyperlinks to the shapes - this means the item (the linked to page or image) must exist on the wiki , or use a placeholder; | ||
+ | - For the given diagram select all the shapes then Save As an SVG and untick the Visio properties (can set as a general option in settings) as they simply add bulk. | ||
+ | |||
+ | |||
+ | In a text editor (e.g. Notepad++): | ||
+ | - If you have added hyperlinks search for ' | ||
+ | - To solve the ' | ||
+ | - Save the file. | ||
+ | |||
+ | In the Wiki: | ||
+ | - Upload | ||
+ | - Add to a page using SVGEmbed | ||
+ | |||
+ | //Example and notes// | ||
+ | |||
+ | * The links must exist or be known prior to existence so that you can edit them in the Visio produced SVG file. | ||
+ | * Always used the full URL in the link | ||
+ | * The SVG xml code for the hyperlink will look something like this once edited: | ||
+ | |||
+ | < | ||
+ | xlink: | ||
+ | xlink: | ||
+ | target=" | ||
+ | </ | ||
+ | |||
+ | The target value of " | ||
+ | |||
+ | |||
+ | |||
+ | ==== Malformed or unusual SVG files ==== | ||
+ | |||
+ | If your SVG file does not have dimensions specified in '' | ||
+ | |||
+ | You may be able to fix this by loading the file into an SVG-capable editor (such as [[https:// | ||
+ | |||
+ | |||
+ | ==== Printing SVGs ==== | ||
+ | |||
+ | Often you may want to include SVG files in your wiki but want to be able to make them printable by users (org charts, data center configurations, | ||
+ | |||
+ | You may set this in a couple ways: | ||
+ | |||
+ | - Affirmative printing: | ||
+ | - Selective printing: | ||
+ | |||
+ | To configure the wikitext, you can include the argument '' | ||
+ | |||
+ | ^ Setting | ||
+ | | Enable | ||
+ | | Disable | ||
+ | |||
+ | Additionally, | ||
+ | |||
+ | // | ||
+ | |||
+ | - To set an SVG for printing: '' | ||
+ | - To set an SVG to suppress printing (if configured to make all SVGs printable): | ||
+ | |||
+ | Of course, these arguments can be combined with any other arguments this plugin accepts. | ||
+ | |||
+ | |||
+ | |||
+ | === Styling SVG print button === | ||
+ | |||
+ | The class for the SVG printing button is '' | ||
+ | |||
+ | <code css> | ||
+ | /* SVG printing button */ | ||
+ | .dokuwiki div.svgprintbutton_table button { | ||
+ | font-family: | ||
+ | background: transparent; | ||
+ | border-top: none; | ||
+ | border-left: | ||
+ | border-right: | ||
+ | border-bottom: | ||
+ | border-radius-bottom: | ||
+ | color: #ccc; | ||
+ | font-size: 80%; | ||
+ | padding: 3px; | ||
+ | } | ||
+ | |||
+ | .dokuwiki div.svgprintbutton_table: | ||
+ | border-left: | ||
+ | border-right: | ||
+ | border-bottom: | ||
+ | color: #f99; | ||
+ | } | ||
+ | |||
+ | .svgembed_print_border { | ||
+ | background: rgba(0, 0, 0, 0.1); | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | With this code I get a small button that is dim when normal, slightly grey-pink when hovered, and while it's hovered the JavaScript for this plugin triggers the last set of rules to slightly darken the background of the SVG file to show what would be printed if the button is pressed. | ||
+ | |||
+ | ==== Export to PDF with DW2PDF ==== | ||
+ | |||
+ | Export with [[plugin: | ||
+ | |||
+ | Unfortunately, | ||
+ | |||
+ | This may not be in final form. Further testing is needed, but does not affect anything if you are not using DW2PDF. | ||
+ | ===== Development ===== | ||
=== Change Log === | === Change Log === | ||
+ | * **2021-06-09** | ||
+ | * Added initial support for [[plugin: | ||
+ | * **2020-06-07** | ||
+ | * Made change to make compatible with Hogfather RC2. | ||
+ | * **2020-06-05** | ||
+ | * Changes to fix [[https:// | ||
+ | * **2020-05-12** | ||
+ | * Changes to fix [[https:// | ||
+ | * **2020-01-17** | ||
+ | * Updated to embed the SVG with an ''< | ||
+ | * **2019-11-26** | ||
+ | * Changes to fix [[https:// | ||
+ | * **2019-11-25** | ||
+ | * Changes to fix Github issues [[https:// | ||
+ | * **2019-07-10** | ||
+ | * Change to fix conflict with [[plugin: | ||
* **2019-06-21** | * **2019-06-21** | ||
* Initial release | * Initial release | ||
+ | |||
+ | |||
+ | === Limitations === | ||
+ | |||
+ | SVGZ (compressed SVG) files are not supported because of the way the plugin operates. | ||
+ | |||
=== Known Bugs and Issues === | === Known Bugs and Issues === | ||
- | None. | + | * Currently, SVG file positioning may be an issue with the DW2PDF integration. |
- | ===== Discussion ===== | + | If you find a bug, please [[https:// |
+ | ===== Discussion ===== | ||
+ | |||
+ | > < | ||
+ | > < | ||
+ | > < | ||
+ | > <del> --- [[user> | ||
+ | >> < | ||
+ | >> | ||
+ | >> < | ||
+ | >> | ||
+ | >> < | ||
+ | >> | ||
+ | >> < | ||
+ | >>> | ||
+ | >>> | ||
+ | > < | ||
+ | >> < | ||
+ | >> | ||
+ | >> < | ||
+ | >> | ||
+ | >> | ||
+ | >> | ||
+ | >> < | ||
+ | >> | ||
+ | >> | ||
plugin/svgembed.txt · Last modified: 2023-12-06 21:25 by Restless