首页 > 解决方案 > 如何使用 Image Magick 生成与源(SVG)文件中字体相同的正确 PNG 文件?

问题描述

我有一个 svg 文件,其中包含图像标签(基于 url 的源图像)以及 2 个文本标签。支持字体(影响)已使用导入属性链接到 svg 文件中。

Svg 在 google chrome 浏览器上可以正确预览。但是,当我使用 Image Magick Tool 将其转换为 PNG 文件时。它导致了一些奇怪的形式。即使图像在生成的文件中也不可见。

这是我用来将 SVG 文件转换为 Png 文件的代码。

ImageMagick.MagickImage image = new ImageMagick.MagickImage(@"c:\1.svg");
image.Format = ImageMagick.MagickFormat.Png;
image.Write(@"c:\Magick.png");

SVG 预览

在此处输入图像描述

PNG预览

在此处输入图像描述

原始 SVG 内容

 <!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="200mm" height="200mm" viewBox="0 0 200 200" version="1.1" id="svg933" inkscape:version="0.92.4 (5da689c313, 2019-01-14)" sodipodi:docname="Generic-basic-001.svg">
  <style type="text/css" id="style4277">
        @import url('http://www.micronew.rebuildsucceeded.com/LogoFonts/Impact/stylesheet.css');
        tspan{font-family: 'Impact';}
   </style>
  <defs id="defs927" />
  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.7" inkscape:cx="420.83998" inkscape:cy="361.08122" inkscape:document-units="mm" inkscape:current-layer="g4841" showgrid="false" showguides="true" inkscape:guide-bbox="true" inkscape:window-width="1600" inkscape:window-height="837" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" />
  <metadata id="metadata930">
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(0,-97)">
    <g id="g4841" transform="translate(2.3899998e-6,13.099254)">
      <path d="M 7.7005693,261.48884 0.85816725,240.68517 H 199.23209 l -7.0088,20.80367 6.6641,20.87657 H 0.85816725 Z" style="fill:#00329f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.35277775" id="path_1657007234" inkscape:connector-curvature="0" sodipodi:nodetypes="ccccccc" />
      <text y="300.2991" x="92.389214" id="text_534011718" style="font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15.37923622px;font-family:Bitter;-inkscape-font-specification:Bitter-Regular;writing-mode:lr-tb;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.3480221" transform="scale(1.084439,0.92213577)">
        <tspan y="300.2991" x="92.389214" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:42.22720337px;font-family:Impact;-inkscape-font-specification:Impact;text-align:center;text-anchor:middle;fill:#ffffff;stroke-width:0.3480221" id="tspan1159-0" sodipodi:role="line" textLength="80%" lengthAdjust="spacingAndGlyphs">Diploma Computer Engineering</tspan>
      </text>
      <text transform="scale(0.90833359,1.1009171)" y="201.96021" x="110.44985" id="text_237820880" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.56167221px;font-family:'Alfa Slab One';-inkscape-font-specification:'Alfa Slab One Bold';text-align:center;writing-mode:lr-tb;text-anchor:middle;fill:#00329f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.35277781">
        <tspan y="201.96021" x="110.44985" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:52.64328003px;font-family:Impact;-inkscape-font-specification:'Impact Bold';text-align:center;text-anchor:middle;fill:#00329f;fill-opacity:1;stroke-width:0.35277781" id="tspan1163-8" sodipodi:role="line" textLength="100%" lengthAdjust="spacingAndGlyphs">Qualification</tspan>
      </text>
      <path inkscape:connector-curvature="0" id="path_1412011072" d="m 0.83004735,230.11114 a 0.81305725,2.1359739 0 1 0 0,4.27041 H 199.26021 a 0.81305725,2.1359739 0 1 0 0,-4.27041 z" style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#00329f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.54116118;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
      <image width="85" height="85" preserveAspectRatio="none" style="stroke-width:0.66612744;image-rendering:optimizeSpeed" xlink:href="https://www.elsetge.cat/myimg/f/226-2263854_night-beautiful-pictures-of-nature.jpg" id="image_1002897798" x="57.545128" y="84.95945" />
    </g>
  </g>
</svg>

谁能帮我解决这个问题。

标签: c#svgimagemagickpngimagemagick-convert

解决方案


推荐阅读