1

I am facing a problem with font style being not applied as defined in SVG. Note that I am using inkscape to create SVG file.

I am using imagemagick however that doesn't play nicely or it does not respect this particular style applied to the SVG fonts.

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

Specifically I want to have this style to be applied correctly:

textLength="80%" lengthAdjust="spacingAndGlyphs"

but I am not sure why imagemagick ignores them while converting to PNG.

Or else, please guide me to choose the best library / tool to convert svg to png programmatically using C#?

SVG File

<!-- 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">  
  <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="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANYAAADWCAYAAACt43wuAAAABHNCSVQICAgIfAhkiAAAAAlwSFlz AAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAN/SURB VHic7d1BahZBFIXR1xU35B5cpxtxUaIENQT/duAGMngfgXDOWFrBFP3q3qrONZ+/fpnr+jbAmjNP 1/Xe/wj4aM7cFhZsO3M/LCxYdma8sWDbmftYWLDszJNRELYJLyAgvIDAee9/AHxEUkEI2GNBwB4L As4KQkBBDIEzYxSEbcILCOixIGAUhMCZYxSEbfZYEDAKQsAbCwJn5rawYJnwAgJ6LAjYY0FAKggB bywIuJoPgTPHKAjbjIIQUBBDQI8FAaMgBKSCEJAKQsAoCAGjIAScFYSAURACZ46CGLYpiCEgvICA PRYEpIIQ8MaCgM+fQcB9LAicucfCgmV6LAgYBSEgFYSAVBACCmIIGAUh4BAuBM7cUkHYpseCwJnj 5AVsUxBDQCoIAakgBM7cCmLY5kgTBIyCENBjQcDJCwicGQUxbPPGgoDwAgLidggoiCFgFISAHgsC TrdDwH0sCLhBDAEFMQSkghCwsCCgIIaAHgsCzgpCQEEMAQUxBNwghoCCGALCCwgILyCgx4KAVBAC UkEI2GNB4MwxCsK2M7dRELYJLyDgoiME9FgQkApCQCoIAakgBIQXEBC3Q8AoCAHhBQT0WBDQY0FA KggBqSAEpIIQ8PkzCPhgJwR8TAYCwgsIKIghoMeCwJnLwoJtUkEISAUhIBWEgPACAmcuoyBs02NB QCoIAXssCFhYEBC3Q8ANYgicubyxYJs9FgT0WBBwCBcCFhYEpIIQcIMYAgpiCNhjQcAbCwJ6LAj4 xXMQcDUfAsILCFhYEHC6HQI+JgMB4QUEFMQQUBBDQHgBAXE7BFx0hIBUEAL2WBAQt0NAeAEBPRYE jIIQ8PkzCOixICC8gICFBQEFMQT8RkcI6LEgIBWEgIIYAsILCIjbIeCiIwSEFxCwx4KAHgsC4nYI SAUhIBWEgFQQAkZBCFhYELCwIOArTRBQEEPAL/eGgD0WBCwsCFhYEHDyAgLOCkLAKAgBPRYEXM2H gBvEEJAKQkAqCAGpIAQsLAhYWBDQY0HAGwsCCmIIKIghYBSEgIUFAQsLAhYWBPRYEPDGgoCFBQEF MQQUxBAwCkLAwoKAhQWBT2/8c68z87z49/6YmcfOo+6XmevXzrNmZq7ve896/Jq5XpYe9nfm/rn0 rJnrep7//68bD3udx73783FdOz8f9/yZc/9eedbMzON+08/HP4wDkH5G/41GAAAAAElFTkSuQmCC  " id="image_1002897798" x="57.545128" y="84.95945" />
    </g>
  </g>
</svg>

Update We're using Inkscape version - 0.92.4 (latest version) ImageMagick Version - 7.14.5 (latest version of "Magick.NET-Q16-AnyCPU.dll" provided by ImageMagick for .Net Platform).

Also note that we are adding this property manually.

Krunal
  • 2,967
  • 8
  • 45
  • 101
  • Imagemagick offloads to Inkscape. So this is likely an inkscape issue. Does it work if you use inkscape directly? If not, then what version of Inkscape? Is it current? If not upgrade and try again. What is your version of Imagemagick and platform? – fmw42 Dec 10 '19 at 06:57
  • If those are custom properties and not standard SVG tags, then I do not see how Inkscape would know about them. Post your SVG file and your PNG result and point out where it is wrong? Do you have the proper fonts on your system that are called in the SVG file? – fmw42 Dec 10 '19 at 17:29
  • I am using the Impact font, which is already installed. And by custom I mean that we added it manually to the SVG as Inkscape was not adding them. These tags only work on Chrome & IE, not in firefox. It should look like this: https://prnt.sc/q97qv2 but we get this https://prnt.sc/q97qez – Krunal Dec 11 '19 at 09:29
  • If you are using special tags that are not known to Inkscape, then it will not work with Imagemagick, when Imagemagick uses Inkscape to rasterize the SVG file. – fmw42 Dec 11 '19 at 18:32
  • @fmw42 thanks, we use textLength and lengthAdjust which work fine for chrome, just when we convert them PNG using imagemaick then it does not work. What do you recommend to achieve this while converting it to PNG? Do you have any other library in mind that we should be checking instead of imagemagick? – Krunal Dec 12 '19 at 06:07
  • Imagemagick can do the rasterizations. But it (MSVG/XML) is not very good. Typically users install either RSVG delegate or use Inkscape. If you have tried both of those two standalone (outside Imagemagick) and they do not work, then I have no other software to suggest. Perhaps others might. When Inkscape is installed on the system, Imagemagick will offload to it for the rasterization. Any limits come from either RSVG or Inkscape and likely not from Imagemagick. Sounds like you are using some custom Chrome tags that other renderers do not know about. – fmw42 Dec 13 '19 at 03:25

0 Answers0