DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:svgembed

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
Next revisionBoth sides next revision
plugin:svgembed [2021-01-15 03:47] – [Configuration] Restlessplugin:svgembed [2021-06-09 17:23] – [Development] Restless
Line 6: Line 6:
 email      : restlessmind@gmail.com  email      : restlessmind@gmail.com 
 type       : helper, syntax type       : helper, syntax
-lastupdate : 2020-10-13+lastupdate : 2021-06-09
 compatible : Hogfather, Greebo  compatible : Hogfather, Greebo 
 depends    :  depends    : 
 conflicts  conflicts 
 similar    :  similar    : 
-tags       : svg, media, image, images, diagram, diagrams+tags       : svg, media, image, images, diagram
  
 downloadurl: https://github.com/restlessminded/dokuwiki-plugin-svgEmbed/archive/master.zip downloadurl: https://github.com/restlessminded/dokuwiki-plugin-svgEmbed/archive/master.zip
-bugtracker : http://github.com/restlessminded/dokuwiki-plugin-svgembed/issues+bugtracker : https://github.com/restlessminded/dokuwiki-plugin-svgembed/issues
 sourcerepo : https://github.com/restlessminded/dokuwiki-plugin-svgEmbed sourcerepo : https://github.com/restlessminded/dokuwiki-plugin-svgEmbed
 donationurl:  donationurl: 
Line 20: Line 20:
 screenshot_img : https://www.w3.org/Icons/SVG/svg-logo-h.svg screenshot_img : https://www.w3.org/Icons/SVG/svg-logo-h.svg
 ---- ----
 +
 +===== Requirements =====
 +
 +PHP 7+ and [[https://www.php.net/manual/en/book.libxml.php|libxml libraries]] required.
  
 ===== Installation ===== ===== Installation =====
Line 34: Line 38:
 |   **default_width** | Default fall-through width of an SVG file. | 300 | |   **default_width** | Default fall-through width of an SVG file. | 300 |
 |  **default_height** | Default fall-through height of an SVG file. | 150 | |  **default_height** | Default fall-through height of an SVG file. | 150 |
-|   **default_print** | Make all SVG files in your wiki have a print button. | False |+|   **default_print** | Make all SVG files in your wiki have a print button. ([[#printing_svgs|About printing.]]) | False |
  
 See below for discussion about how these values interact with your SVG file for display. See below for discussion about how these values interact with your SVG file for display.
Line 69: Line 73:
   * [[#setting_responsive_units|Setting responsive units]] instead of normal ''px'' "pixel" units that Dokiwiki normally uses   * [[#setting_responsive_units|Setting responsive units]] instead of normal ''px'' "pixel" units that Dokiwiki normally uses
   * [[#additional_css_classes|Adding additional CSS classes]] to the SVG file   * [[#additional_css_classes|Adding additional CSS classes]] to the SVG file
 +  * [[#printing|Printing]] SVGs from the page
  
 === Formatting === === Formatting ===
Line 123: Line 128:
 > <code - Example> > <code - Example>
 {{:some:ns:myfile.svg&class:redborder&class:bluecircle|}}</code> {{:some:ns:myfile.svg&class:redborder&class:bluecircle|}}</code>
 +
 +
 +=== Printing ===
 +
 +Printing of individual SVG files from the page has been implemented.  Please see the [[#printing_svgs|section on printing]] for configuration or arguments to allow for this.
  
  
Line 177: Line 187:
  
  
 +==== 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, maps, etc.).  When an SVG file is printable you will see a small button below the picture in the wiki that, upon clicking, will open a popup with the SVG file in and automatically call for the file to be printed (tested in Google Chrome and Mozilla Firefox).
 +
 +You may set this in a couple ways:
 +
 +  - Affirmative printing:  you may make all SVG files printable by default globally in the admin Configuration Settings panel under the svgEmbed plugin section.  If the ''default_print'' box is checked, all SVG files placed by this plugin will be considered printable unless disabled in the wikitext.
 +  - Selective printing:  you may decline to make all SVG files printable by default globally in the admin Configuration Settings panel under the svgEmbed plugin section.  If the ''default_print'' box is unchecked, no SVG files placed by this plugin will be considered printable unless explicitly configured in the wikitext.
 +
 +To configure the wikitext, you can include the argument ''print:<setting>''.
 +
 +^  Setting  ^ Configuration setting  ^
 +|  Enable   | One of:  1, true, yes, on  |
 +|  Disable  | One of:  0, false, no, off  |
 +
 +Additionally, as a special case, the default meaning of the naked argument ''print'' with no setting value is the equivalent of enabled.
 +
 +//Examples://
 +
 +  - To set an SVG for printing: ''%%{{ :my:svg:file.svg?print:true |Test!}}%%''
 +  - To set an SVG to suppress printing (if configured to make all SVGs printable):  ''%%{{ :my:svg:file.svg?print:false |Test!}}%%''
 +
 +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 ''svgprintbutton_table'', and the SVG itself is wrapped in ''svgembed_print_border''; on my particular wiki using the [[template:monobook|Monobook]] template I am styling using the following CSS:
 +
 +<code css>
 +/* SVG printing button */
 +.dokuwiki div.svgprintbutton_table button {
 +  font-family: Arial, sans-serif;
 +  background: transparent;
 +  border-top: none;
 +  border-left: 1px dashed #ccf;
 +  border-right: 1px dashed #ccf;
 +  border-bottom: 1px dashed #ccf;
 +  border-radius-bottom: 4px;
 +  color: #ccc;
 +  font-size: 80%;
 +  padding: 3px;
 +}
 +
 +.dokuwiki div.svgprintbutton_table:hover button {
 +  border-left: 1px solid #fcc;
 +  border-right: 1px solid #fcc;
 +  border-bottom: 1px solid #fcc;
 +  color: #f99;
 +}
 +
 +.svgembed_print_border {
 +  background: rgba(0, 0, 0, 0.1);
 +}
 +</code>
 +
 +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:dw2pdf|DW2PDF]] is now supported.  For this functionality ''<img>'' tag is used for output since the [[https://mpdf.github.io/html-support/html-tags.html|documentation for mPDF's HTML support]] specifies that ''<embed>'' and ''<object>'' are not supported tags for rendering to PDF.
 +
 +Unfortunately, due to this it means that links in SVG files cannot realistically be supported in the PDF output.
 +
 +This may not be in final form.  Further testing is needed, but does not affect anything if you are not using DW2PDF.
 ===== Development ===== ===== Development =====
  
 === Change Log === === Change Log ===
  
 +  * **2021-06-09**
 +    * Added initial support for [[plugin:dw2pdf|DW2PDF plugin]] ([[https://github.com/restlessminded/dokuwiki-plugin-svgEmbed/issues/9|GitHub issue #9]]).  See [[:#export_to_pdf_with_dw2pdf|the section on this]] for more information.
   * **2020-06-07**   * **2020-06-07**
     * Made change to make compatible with Hogfather RC2.     * Made change to make compatible with Hogfather RC2.
plugin/svgembed.txt · Last modified: 2023-12-06 21:25 by Restless

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki