Visual Paradigm 生成的 svg 在与浏览器不同的 inkscape 中呈现

Question

当我在 Visual Paradigm 中创建图表并以 SVG 格式导出它们时，它们在浏览器中正确呈现，但在 Inkscape 等程序中呈现错误。

例如，这是在浏览器（Chrome或IE）中的渲染：

这里是同一文件在 Inkscape 或其他 PDF 转换器中的呈现方式：

这是 svg 文件：

<?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
>

我需要将渲染正确的文件转换为 PDF。你能帮我解决这个问题吗？

Answer 1

问题是因为指定的字体属性。 svg 中指定的字体系列是 "sans-serif"。浏览器使用的默认无衬线字体是 Arial，而 Inkscape 使用操作系统的默认字体，即 Inkscape 在 Windows 机器上使用的无衬线字体是 Verdana。

因此，将 svg 中的 "sans-serif" 替换为 "arial" 即可解决问题。

Visual Paradigm 生成的 svg 在与浏览器不同的 inkscape 中呈现

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

svg

pdf-conversion

visual-paradigm