Search code examples
svgpdf-conversionvisual-paradigm

svg generated by Visual Paradigm is rendered in inkscape different than in browsers

When I create come diagrams in Visual Paradigm and export them in SVG format, they are rendered correctly in browsers but wrongly in programs like Inkscape.

For example, this is the rendering in browser (Chrome or IE):

enter image description here

while here is how the same file is rendered in Inkscape or other PDF converters:

enter image description here

Here is the svg file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
          'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg fill-opacity="0" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="rgb(0,0,0)" stroke-linecap="square" width="686" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="0" fill="rgb(0,0,0)" stroke-dasharray="none" font-weight="normal" stroke-width="1" height="699" xmlns="http://www.w3.org/2000/svg" font-family="&apos;Dialog&apos;" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto"
><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"
  /><g
  ><defs id="defs1"
    ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath1"
      ><path d="M-7 -7 L691 -7 L691 704 L-7 704 L-7 -7 Z"
      /></clipPath
      ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath2"
      ><path d="M0 0 L0 21 L134 21 L134 0 Z"
      /></clipPath
      ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath3"
      ><path d="M-7 -7 L225 -7 L225 63 L-7 63 L-7 -7 Z"
      /></clipPath
      ><clipPath clipPathUnits="userSpaceOnUse" id="clipPath4"
      ><path d="M0 0 L0 52 L214 52 L214 0 Z"
      /></clipPath
    ></defs
    ><g fill="white" text-rendering="geometricPrecision" fill-opacity="1" stroke-opacity="1" stroke="white"
    ><rect x="0" width="686" height="699" y="0" stroke="none"
    /></g
    ><g stroke-linecap="butt" font-size="11" transform="translate(2,2)" fill-opacity="1" fill="black" text-rendering="geometricPrecision" font-family="sans-serif" stroke-linejoin="round" stroke="black" font-weight="bold" stroke-opacity="1" stroke-miterlimit="0"
    ><rect x="1" y="1" clip-path="url(#clipPath1)" fill="none" width="678" rx="15" ry="15" height="691"
    /></g
    ><g font-size="11" transform="translate(2,2)" fill-opacity="1" fill="black" text-rendering="geometricPrecision" font-family="sans-serif" stroke="black" font-weight="bold" stroke-opacity="1"
    ><text x="10" xml:space="preserve" y="18" clip-path="url(#clipPath2)" stroke="none"
      >Testing Some Diagram</text
    ></g
    ><g stroke-linecap="butt" font-size="11" transform="translate(74,33)" fill-opacity="1" fill="black" text-rendering="geometricPrecision" font-family="sans-serif" stroke-linejoin="round" stroke="black" stroke-opacity="1" stroke-miterlimit="0"
    ><rect x="0" y="0" clip-path="url(#clipPath3)" fill="none" width="214" rx="15" ry="15" height="52"
    /></g
    ><g font-size="11" transform="translate(74,33)" fill-opacity="1" fill="black" text-rendering="geometricPrecision" font-family="sans-serif" stroke="black" stroke-opacity="1"
    ><text x="9" xml:space="preserve" y="15" clip-path="url(#clipPath4)" stroke="none"
      >Lorem ipsum dolor sit amet, consectetur</text
      ><text x="6" xml:space="preserve" y="30" clip-path="url(#clipPath4)" stroke="none"
      >adipiscing elit. In congue lorem orci, vitae</text
      ><text x="84" xml:space="preserve" y="45" clip-path="url(#clipPath4)" stroke="none"
      >mollis mi.</text
    ></g
    ><g fill="rgb(120,120,120)" text-rendering="geometricPrecision" fill-opacity="1" font-size="10" stroke-opacity="1" stroke="rgb(120,120,120)"
    ><text x="423" xml:space="preserve" y="686" stroke="none"
      >Powered ByVisual Paradigm Community Edition</text
      ><image font-size="12" x="662" y="672" fill="white" width="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAB6ElEQVR42mNgIAKc
MTZuPm1i0kWMWkYiDKsBUs1QbguIMDl7thaXeiYGKgNGAi5jQHIdQtP//63G587V
YNPHTMCbTlCh5f8ZGa8BbdeBmMholyYlxTLr+fP9BA1ECzMQWAPEsQIfP278ycGh
DWTfAGJNIMZqKCMuw4DeOgiijc6dcwIq+gdirwoNBTtA+e7dvUAX28O8D1VXC1T3
n+qRwgJ1WS56BABdoAKWMzV1Yjh9eg+IrXTvniVUTgFJXTWIPmts/IXh7NkOFqiz
90DlTwMVmELZ0mC5f/9WAy0M+svMfInh79/NUDkBJEddhJqxDSMMgbnBASjRCWSa
ofnkHRBHArExlN8Gpc8BHVABYpieObMbHstAF+gCY0wcaPomIBfkih9ArIhkICcQ
ewExKPs9AuIHQMwKjbgmoL6gFBmZg7OfPXtGm0jh/PHjJoj+zsExG0iBkk4nkhpY
4hYG4u0gxj8mJlumf/8+Ab07AcjtAYkJvn9/CWvWO2tkVA9U2ABkdkCFzJAMPQGN
gONANYUgNcCCohJvTgGm/IOp0tKMjBCX2oDSM1TqOdCgvUDx+0DDSkG+QDcMb+EA
jPEGqGvqgVQ7EP8GYlix1QU0rGJgiy8sYcoAdSmogK2iyFZgOm0D4h5i1AIAuQCv
ZpMHcwsAAAAASUVORK5CYII=" height="20" stroke="white" preserveAspectRatio="none"
    /></g
  ></g
></svg
>

I need to convert the file with the correct rendering into PDF. Could you help me on this please?

Solution

  • The problem is because of the specified font properties. The font family specified in the svg is "sans-serif". The default sans serif font used by browsers is Arial, while Inkscape uses the default fonts of the operating system i.e. sans serif font used by Inkscape on Windows machines is Verdana.

    Thus, replacing "sans-serif" with "arial" in the svg solves the problem.