Differences

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

--- plugin:svgembed [2020-06-06 03:56] – [Development] Restless
+++ plugin:svgembed [2023-12-06 21:25] (current) – [svgEmbed Plugin] Restless
@@ Line 2: / Line 2: @@
 ---- plugin ----
-description: Allows the use of the standard media syntax, but SVG files are placed with the <object> or <embed> tag, not the <img> tag.
+description: Allows the use of the standard media syntax (with some extensions), but SVG files are placed with the <object> or <embed> tag, not the <img> tag
-author     : Michael Bowers
+author     : Emma Bowers
-email      : restlessmind@gmail.com
+email      : emb@pobox.com
 type       : helper, syntax
-lastupdate : 2020-06-05
+lastupdate : 2021-06-09
-compatible : Greebo
+compatible : Igor, Hogfather, Greebo, Jack Jackrum
 depends    :
 conflicts  :
 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
-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
 donationurl:
 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.
+==== Compatibility with Igor release candidates ====
+As of this writing (June 27, 2022), this plugin is compatible with the Igor RC2 release without changes.  It is my aim to keep it compatible since, although Dokuwiki supports SVG in that release, it still uses the ''<img>'' tag and so it will not make use of embedded links.  Further, I intend to refactor it somewhat for a couple of requests and a bug report on the Github, but its number has not come up yet.
 ===== Installation =====
@@ Line 30: / Line 39: @@
 Under the "Configuration Settings" page in the admin panel, the plugin has a section with a few values:
-^        Setting name ^ Description ^ Default value ^
+^        Setting name ^ Description ^  Default value  ^
-|   **max_svg_width** | Maximum width for SVG file size if no sizes are specified in the wiki page. | 1024 |
+| **max_svg_width**   | Maximum width for SVG file size if no sizes are specified in the wiki page. |  1024  |
-|   **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. ([[#printing_svgs|About printing]]) |  False  |
 See below for discussion about how these values interact with your SVG file for display.
@@ Line 66: / Line 76: @@
   * [[:wiki:syntax#media_files|The normal image formatting arguments for media files]], although there are some [[#formatting|caveats and modifications documented below]]
-  * [[#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 DokuWiki normally uses
   * [[#additional_css_classes|Adding additional CSS classes]] to the SVG file
+  * [[#printing|Printing]] SVGs from the page
 === Formatting ===
@@ Line 122: / Line 133: @@
 > <code - Example>
 {{: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 133: / Line 149: @@
 If you want a link to open full-page, you should specify the ''target'' attribute on your links in your SVG file.  In particular, if you specify the ''_top'' target then your links will open in the current page at the top level.
+**Visio produced SVG files**
+You can produce an SVG from Visio however it doesn't populate the title tag with anything useful so the link will just show something meaningless on hover, it is made worse if your shape is a 'group'since each item in the group will have a 'title'. The basic workflow from Visio is as follows:
+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; use the full URL and populate the description field (this becomes the xlink 'title).
+  - 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 'xlink' then add a target tag (see example below), sadly It seems there is no way to force this in Visio which means you need to edit the SVG file on every revision.
+  - To solve the 'title' issue remove extraneous Alt text: find all lines with the title tag (Regex would be <title>(.*?)</title>) replace with nothing. If you don't do this then hovering over any shape will show meaningless titles like 'Sheet.235' which is no help to anyone, and removing title doesn't seem to have any untoward consequences. Note it doesn't change the xlink titles you created when entering the Description field in the hyperlinks.e
+  - 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:
+<code>
+	xlink:href="http://mysite.com/doku.php?id=ns:mypage"
+	xlink:title="My Page Title"
+	target="_top">
+</code>
+The target value of "_top" must be added to ensure that the link opens in the current page properly (or use an other target tag value).
@@ Line 142: / Line 192: @@
+==== 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 =====
 === 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**
+    * Made change to make compatible with Hogfather RC2.
   * **2020-06-05**
     * Changes to fix [[https://github.com/restlessminded/dokuwiki-plugin-svgEmbed/issues/6|issue #6]], an enhancement request to support responsive images.  I added new parameters that allows a user to set responsive (''%'' and ''vw'') units instead of the default ''px'' units.  At the same time, I added another parameter to support adding CSS classes to the SVG image.
@@ Line 160: / Line 280: @@
   * **2019-06-21**
     * Initial release
+=== Limitations ===
+SVGZ (compressed SVG) files are not supported because of the way the plugin operates.  This does not limit DokuWiki functionality since, technically, it doesn't support SVGZ either.
 === Known Bugs and Issues ===
-None.  If you find a bug, please [[http://github.com/restlessminded/dokuwiki-plugin-svgembed/issues|submit a bug]] at the [[http://github.com/restlessminded/dokuwiki-plugin-svgembed|project's github]].
+  * Currently, SVG file positioning may be an issue with the DW2PDF integration.  I will be working on this at a future date.
+If you find a bug, please [[https://github.com/restlessminded/dokuwiki-plugin-svgembed/issues|submit a bug]] at the [[https://github.com/restlessminded/dokuwiki-plugin-svgembed|project's github]].
-Note that I have not tested under Hogfather yet.  I will test under Hogfather once there's a final release.
 ===== Discussion =====
@@ Line 180: / Line 306: @@
 >> <del>I have confirmed your other issue reported on github regarding flickering when you try to edit a section; that one is confusing, I'm going to have to look into that one some more.  I have seen it with some other plugins and certain stylesheet alterations, too.</del>
 >>
->> <del>--- [[user>Restless|Michael Bowers]] //2019-11-25 19:11//</del>
+>> <del>--- [[user>Restless|Emma Bowers]] //2019-11-25 19:11//</del>
 >>> <del>I think these issues are fixed in my latest commit.  Please update and test.</del>
->>>  <del>--- [[user>Restless|Michael Bowers]] //2019-11-26 01:55//</del>
+>>>  <del>--- [[user>Restless|Emma Bowers]] //2019-11-26 01:55//</del>
 > <del>One more thing: The media manager indicates that the SVG file is not in use. Therefore, there is a certain danger that it will be accidentally deleted. \\  --- [[user>juergen_aus_zuendorf|Juergen_aus_Zuendorf]] //2019-11-26 12:54//</del>
 >> <del>You are a harsh taskmaster... and I appreciate it!  :-)</del>
@@ Line 188: / Line 314: @@
 >> <del>I'll get on it when I get to the office.</del>
 >>
->>  <del>--- [[user>Restless|Michael Bowers]] //2019-11-26 14:56//</del>
+>>  <del>--- [[user>Restless|Emma Bowers]] //2019-11-26 14:56//</del>
 >>
 >> <del>Fixed it in a new commit.  Let me know what else you may find!</del>
 >>
->>  <del>--- [[user>Restless|Michael Bowers]] //2019-11-26 22:32//</del>
+>>  <del>--- [[user>Restless|Emma Bowers]] //2019-11-26 22:32//</del>