Jarmo Hurri <jarmo.hu...@iki.fi> writes:
> Christian Moe <m...@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
