SVG with svg element embedded-CodePudding

I've a problem with a complicated SVG.

It's work on Chrome and FF, but there is no way to convert into a png even using online tool or Gimp and also with inkspace.

I'm not sure where is the problem, maybe because is an image builded with 2 other svg embedded.

Here the svg file.

To reproduce problem: open the svg file linked with a browser: it's work.

Open it with GIMP the image is empty

a more esier example with the same problem:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Some graphical objects to use -->
  <defs>
    <svg id="pippo" viewBox="0 0 10 10" >
      <circle id="myCircle" cx="5" cy="5" r="5" />
    </svg>

    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="20%" stop-color="gold" />
      <stop offset="90%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my graphical objects -->

  <rect height="100%" width="100%" fill="#fc0" />

  <use x="0" y="0" href="#pippo" fill="url('#myGradient')" />
</svg>

CodePudding user response：

With SVG 1 you need to use the attribute xlink:href instead of href on the use element

<use x="0" y="0" xlink:href="#pippo" fill="url('#myGradient')" />

You will also need the xlink namespace on the <svg> element

<svg 
  viewBox="0 0 10 10" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink"
>

Since SVG 2, xlink: prefix is deprecated but SVG 2 is a W3C Candidate Recommendation and all its features are not yet supported by all browsers and editors.

Full SVG 1 example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Some graphical objects to use -->
  <defs>
    <svg id="pippo" viewBox="0 0 10 10">
      <circle id="myCircle" cx="5" cy="5" r="5" />
    </svg>

    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="20%" stop-color="gold" />
      <stop offset="90%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my graphical objects -->
  <rect height="100%" width="100%" fill="#fc0" />
  <use x="0" y="0" xlink:href="#pippo" fill="url('#myGradient')" />
</svg>

CodePudding user response：

Workaround: Svg to PDF via native browser feature "save to pdf" (print modal)

Since firefox, chromium, webkit have powerful inbuilt pdf export functionalities combined with way better svg support than any "desktop" application, we can convert complex svgs to a flattened, 'visually hardwired' vector file.

Ideal result

all vector data is retained (can also be opened in a vector application like inkscape, AI, figma etc.)
complexities like nested svgs or <use> elements as well as transforms are repositioned to hardcoded vector x/y coordinates.

... but curb your enthusiasm: common issues

patterns and some complex gradients might be rasterized
you will lose structural data like layers, ids and other editable features.

Manual svg export optimisations

as @Yukulélé already pointed out: some syntax conventions and newer attributes might be too progressive
try to replace css based styling with attributes – svgomg can be helpful
reusable elements defined in or as might have quirky recursive dependencies
try to clean up unnessecary/invalid properties (e.g. hex rgba) and fix incomplete svg nestings (missing end tags)
document dimensions and aspect ratios can often be better retained (by a graphic app), when the parent svg element was added a viewBox and width/height attributes (at least in AI)