All svg images in page are resized to 1.2em high #3690

schplurtz · 2022-06-14T05:52:34Z

Hi,

b43eead forces svg heigth to 1.2em by adding this CSS rule to lib/styles/all.css

svg {
    width: auto;
    height: 1.2em;
}

The problem is that all SVG images wherever they come from are resized to 1.2em high. This is a problem with the a2s plugin for example. The as2 plugin generates images like this :

<svg class="a2s media" width="721px" height="944px" viewBox="0 0 721 944" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Created with ASCIIToSVG (https://github.com/dhobsd/asciitosvg/) -->
Image content here.
</svg>

Yet, the svg is resized to 1.2em high.

In the case of the a2s plugin, I can of course add a css rule svg.a2s { height: auto } in he plugin style files, but I'm wondering if it should be fixed there or more generally in DokuWiki.

The text was updated successfully, but these errors were encountered:

splitbrain · 2022-06-20T12:59:32Z

I think this guardian makes sense and so far I haven't heard of any plugins breaking because of it. So I would like to keep it. So yes, please add the custom height for your plugin's SVGs to the plugin's style file.

schplurtz · 2022-06-20T17:06:26Z

All right. Thanks for the answer.

See dokuwiki/dokuwiki#3690

schplurtz · 2022-06-20T22:59:40Z

Just 2 thoughts before I go to bed

no one complains, but as of june 2022, b43eead is still in dev branch, so very few people have it installed.
If someone uses <HTML><svg>.... in a wiki page, the image gets resized to 1.2em. The solution is to add a style="height:auto" attribute. Like this:

<HTML>
<svg height="300" width="300" viewBox="0 0 300 300" style="height:auto">
  <circle cx="150" cy="150" r="135" fill="red" />
  <text x="55" y="175" fill="#000" style="font-size:2cm">Circle</text>
</svg>
</HTML>

jdehaan · 2022-07-20T23:48:26Z

I use a vendor lib to render svgs and have no direct control upon the attributes/style for the svg tag. The latest release candidate shows up trouble with the svg style which makes all diagrams cut-off.

This is the extension: https://www.dokuwiki.org/plugin:bpmnio

splitbrain · 2022-07-21T06:40:19Z

@jdehaan Of course you have control. Your plugin's style will be more specific than the default setting. In your case it's as easy as adding the following to your styles:

.bjs-container svg {
    height: 100%;
    width: 100%;
}

Though preferably you would set your own class on the wrapper (something like plugin-bpmnio) instead of relying on the class set by the vendor script.

jdehaan · 2022-07-21T09:45:23Z

You are fully right (🤦🏻‍♂️) I could manage to arrange the stuff accordingly... As you have seen I am not a css master. Thanks for the precise hint!

arlt · 2022-08-05T09:49:17Z

I think this guardian makes sense and so far I haven't heard of any plugins breaking because of it. So I would like to keep it. So yes, please add the custom height for your plugin's SVGs to the plugin's style file.

@splitbrain

Here is (another) one: jakob1111/dokuwiki-plugin-flowcharts#27

Yes, the plugins could fix this but in my opinion there is no real reason to set the default height for all svg images to 1.2em.. This is a problem for all plugins which render svg images. Maybe using a class toolbar or icon would be a better idea.

The response of plugin authors is rather slow, if at all.

Hogfather add a default height fot the SVG elements. We need to override it accordingly to dokuwiki/dokuwiki#3690

See dokuwiki/dokuwiki#3690 for background info

gerardnico · 2023-02-10T15:25:47Z

I got also this problem for the combo svg element

I don't understand why this is made a global default.
It made no sense at all.
All svg have already default internal dimensions with the width and height attributes.
(Icon does, ...)

DokuWiki should also have its own namespace by applying a class to not leak this kind of rule.
This rule is for an icon.

svg.dokuwiki-icon {
    width: auto;
    height: 1.2em;
}

It will just break all svg plugins.
I don't understand the positive here.

Fixing mermaid from having a 1.2em height

zeerd · 2023-08-29T04:00:17Z

Me, too. I had to modify this lib/styles/all.css from 1.2em to auto manually to make my wiki working. It terrible.

schplurtz · 2023-08-31T05:00:41Z

@zeerd, modifying lib/styles/all.css is not the best way to go, as your modifications will be lost on next upgrade. You should use conf/userstyle.css to override the defaults. See user styles on dokuwiki.org.

Although it appears that this setting has brought its lot of troubles, and maybe, was not the wisest thing to do, that's the way it is now and we have to deal with it. I wouldn't just override or remove the general setting, but instead add specialized rules targeted at the elements that are having issue. If you need help, you're always welcome to ask on DokuWiki forum.

gerardnico · 2023-08-31T06:01:36Z

we have to deal with it

I'm so sorry for you.

splitbrain closed this as completed Jun 20, 2022

schplurtz pushed a commit to schplurtz/a2s that referenced this issue Jun 20, 2022

prepare for DW release > hogfather

d489786

See dokuwiki/dokuwiki#3690

jdehaan mentioned this issue Jul 20, 2022

Strange visualisation for DokuWiki Version Igor Color-Of-Code/dokuwiki-plugin-bpmnio#19

Closed

DarkWizarD24 added a commit to DarkWizarD24/dokuwiki-plugin-achart that referenced this issue Aug 8, 2022

Fix compatibiliy with Hogfather

2479bdc

Hogfather add a default height fot the SVG elements. We need to override it accordingly to dokuwiki/dokuwiki#3690

DarkWizarD24 mentioned this issue Aug 8, 2022

Fix compatibiliy with Hogfather karl257/dokuwiki-plugin-achart#13

Merged

splitbrain added a commit to cosmocode/dokuwiki-plugin-switchpanel that referenced this issue Aug 24, 2022

Adjust height for Igor compatibility. fixes GreenItSolutions#29

d23abd2

See dokuwiki/dokuwiki#3690 for background info

This was referenced Aug 24, 2022

Adjust height for Igor compatibility. fixes #29 GreenItSolutions/dokuwiki-plugin-switchpanel#30

Open

After update from "Greebo" to "Igor" plantumlparser plugin renders GraphViz code as miniature #3752

Closed

gerardnico added a commit to ComboStrap/combo that referenced this issue Feb 10, 2023

Reversing svg default: dokuwiki/dokuwiki#3690

cdf85d0

splitbrain mentioned this issue May 25, 2023

SVG height conflict between abc2 plugin and bootstrap3 theme1 selfthinker/dokuwiki_plugin_abc2#5

Open

Suisse00 referenced this issue in Suisse00/Dokuwiki-DirtyLittleHelper Jun 4, 2023

Hogfather compatibility fix with mermaid height size

34d7057

Fixing mermaid from having a 1.2em height

Suisse00 mentioned this issue Jun 4, 2023

Mermaid height is 1.2em KalleAPunkt/Dokuwiki-DirtyLittleHelper#1

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

All svg images in page are resized to 1.2em high #3690

All svg images in page are resized to 1.2em high #3690

schplurtz commented Jun 14, 2022

splitbrain commented Jun 20, 2022

schplurtz commented Jun 20, 2022

schplurtz commented Jun 20, 2022

jdehaan commented Jul 20, 2022

splitbrain commented Jul 21, 2022

jdehaan commented Jul 21, 2022 •

edited

arlt commented Aug 5, 2022

gerardnico commented Feb 10, 2023

zeerd commented Aug 29, 2023

schplurtz commented Aug 31, 2023

gerardnico commented Aug 31, 2023

All svg images in page are resized to 1.2em high #3690

All svg images in page are resized to 1.2em high #3690

Comments

schplurtz commented Jun 14, 2022

splitbrain commented Jun 20, 2022

schplurtz commented Jun 20, 2022

schplurtz commented Jun 20, 2022

jdehaan commented Jul 20, 2022

splitbrain commented Jul 21, 2022

jdehaan commented Jul 21, 2022 • edited

arlt commented Aug 5, 2022

gerardnico commented Feb 10, 2023

zeerd commented Aug 29, 2023

schplurtz commented Aug 31, 2023

gerardnico commented Aug 31, 2023

jdehaan commented Jul 21, 2022 •

edited