Re: Scaling HTML-exported SVG

[Jarmo Hurri <jarmo.hurri@iki.fi>]

Jarmo Hurri <jarmo.hurri@iki.fi> writes:

> Christian Moe <mail@christianmoe.com> writes:
>>   #+html_head_extra: <style>#svgfig {width: 200px; }</style>
>>
>>   #+attr_html: :id svgfig
>>   [[path/to/image.svg]]
>>
>> For this to work, the SVG needs to be written to be scalable (with
>> viewport set etc.).
>
> (Also addressed this in the other thread; also here for completeness.)
>
> But this means scaling on a file-by-file basis, which is very
> inconvenient for any larger projects.

Did some tests.

The method you suggested above - setting id - works (all tests done in
Chrome). But setting id-values is cumbersome, because you need to do it
for every file.

It is also possible to set a CSS class similarly, that is, modifying
your example above,

#+html_head_extra: <style>.svgfig {width: 200px; }</style>

#+attr_html: :class svgfig
[[path/to/image.svg]]

This also works and is better, because then it is possible to set a
common class for all SVG figures, and handle them with a single CSS
rule. Better, but not yet perfect, because I still need to add a
attr_html to every SVG figure.

But there seems to be a way around this. With the last approach the
generated HTML looks something like

<object type="image/svg+xml" data="image.svg" class="svgfig">

Why don't we just set a common class for all SVG-images in an HTML
export by default? Then we could still use an <object> to embed it, and
control its size from CSS.

It seems to me that this solves the problem, and requires an extremely
small change.

Jarmo