Inline SVG gets corrupted

support
1

Inlining SVGs like:

$svg.Content | safeHTML

produces many unwanted effects with several SVG files, especially those converted from PDF with Inkscape.

Example

Inlining

As an img element

As you can see, the texts, even if they’ve been converted to object paths, get corrupted. This happens especially with SVGs converted from PDFs with Inkscape (tested with the Poppler/Cairo Import).

Does someone have any clue why this is happening?

Thanks in advance!

2

are you using --minify flag to generate tour website?

if yes, you may want to try disable SVG minification under minify config.

minify:
  disableSVG:  true

More on Minify Configuration

3

are you using --minify flag to generate tour website?

I’m afraid I’m using hugo server :roll_eyes:

4

Try converting the SVG markup into a string first and then output it as HTML:

print $svg.Content | safeHTML

Do the unwanted artifacts persist?

5

One thing to check is what is the HTML generated by Hugo vs what is the DOM interpreted by the browser. Sometimes these are slightly out-of-sync since the browser may try to “fix” things. Granted, it may seem that the parsing of svg text elements (`s, right?) is giving something trouble…

6

Check your content encoding. If it’s not UTF-8 set it. It looks more like fonts are substituted, so maybe it’s only an encoding issue.

7

I’m afraid they’re still there.

8

Check your content encoding. If it’s not UTF-8 set it. It looks more like fonts are substituted, so maybe it’s only an encoding issue.

I can see this line at the beginning of the svg element:

<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
9

@alcarazr You need to make sure that the UTF-8 encoding is set in the head element of the HTML. See here

10

@alcarazr You need to make sure that the UTF-8 encoding is set in the head element of the HTML. See here

I can confirm it.

11

This case is particularly serious. You can see here (including the SVGs as <img> elements) two SVGs:

image
image2880×1800 436 KB

And this is what I get when inlining them (one of them is fine, the other one not):

image
image2880×1800 421 KB

12

Looks like it’s the svg,

the first svg enlace-ionico.svg doesnt set the unit for it’s width and height.

<svg ...
 height="298.24799"
 width="656.953"
...>

Meanwhile this svg Lewis-LiF.svg set the width and height with pt unit.

<svg ...
 height="26.22pt"
 width="128.18pt"
...>
2 Likes
13

Looks like it’s the svg,

Is there any way to fix that without touching the SVG itself? Perhaps including the SVG inside another element where I can set the width? I’d like to include my SVGs as if they were <img> elements, stretching to the entire width of the text where they’re included (as they’re right now).

Thanks in advance!

14

You can directly target the svg element. especially your svg has and id attribute. Lewis-LiF.svg

<svg ...
id="svg241"
...>

set it 100%:

svg#svg241 {
    width: 100%;
    height: 100%;
}

Yes, wrapping inside element and targeting the child .my-element > svg also works.

15

Also try setting the document units in Inkscape to px (instead of pt) before outputting the SVG.

Furthermore try using an SVG optimizer: SVGOMG - SVGO's Missing GUI

16

Follow-up. The size issue was resolved but I’m afraid I’m still seeing parts of some of my SVGs on other SVGs. I’ve been told this:

the SVG element can reuse an SVG shape from elsewhere in the SVG document, so the text issue may be related to reusing the same identifiers in the SVG files.

17

At the end we have switched back to <img> SVGs

18

In any case this issue is not related to Hugo.

This issue happens due to the way that complex SVG files are handled by browsers.

1 Like
19

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.