SVG
SVG copied to clipboard
svg-net
Save SVG to Png don't display Text
Open mermaid live editor, the Sample Flowchart Chart is opened and displayed. Use Action=>SVG download to produce a SVG file. Use the code:
var svgDocument = SvgDocument.Open(strFullPath);
var pngImage = svgDocument.Draw();
pngImage.Save("MyExportedFile.png");
The PNG produced do not contain any text.
Any suggestions ?
Regards.
@MichelLaplane
Text may not have been parsed correctly...
Please check using SVGViewer.
@H1Gdev thanks for your response. What do you mean? Do you mean SVG don't parse it right ? The XMl content has text on label. Here is the content of the file.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" type="text/css"?>
<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="0 0 434.265625 521.28125" style="max-width: 100%;" class="flowchart" xmlns="http://www.w3.org/2000/svg" width="100%" id="graph-1" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>#graph-1{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#graph-1 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#graph-1 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#graph-1 .error-icon{fill:#552222;}#graph-1 .error-text{fill:#552222;stroke:#552222;}#graph-1 .edge-thickness-normal{stroke-width:1px;}#graph-1 .edge-thickness-thick{stroke-width:3.5px;}#graph-1 .edge-pattern-solid{stroke-dasharray:0;}#graph-1 .edge-thickness-invisible{stroke-width:0;fill:none;}#graph-1 .edge-pattern-dashed{stroke-dasharray:3;}#graph-1 .edge-pattern-dotted{stroke-dasharray:2;}#graph-1 .marker{fill:#333333;stroke:#333333;}#graph-1 .marker.cross{stroke:#333333;}#graph-1 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#graph-1 p{margin:0;}#graph-1 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#graph-1 .cluster-label text{fill:#333;}#graph-1 .cluster-label span{color:#333;}#graph-1 .cluster-label span p{background-color:transparent;}#graph-1 .label text,#graph-1 span{fill:#333;color:#333;}#graph-1 .node rect,#graph-1 .node circle,#graph-1 .node ellipse,#graph-1 .node polygon,#graph-1 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#graph-1 .rough-node .label text,#graph-1 .node .label text,#graph-1 .image-shape .label,#graph-1 .icon-shape .label{text-anchor:middle;}#graph-1 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#graph-1 .rough-node .label,#graph-1 .node .label,#graph-1 .image-shape .label,#graph-1 .icon-shape .label{text-align:center;}#graph-1 .node.clickable{cursor:pointer;}#graph-1 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#graph-1 .arrowheadPath{fill:#333333;}#graph-1 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#graph-1 .flowchart-link{stroke:#333333;fill:none;}#graph-1 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#graph-1 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#graph-1 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#graph-1 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#graph-1 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#graph-1 .cluster text{fill:#333;}#graph-1 .cluster span{color:#333;}#graph-1 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#graph-1 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#graph-1 rect.text{fill:none;stroke-width:0;}#graph-1 .icon-shape,#graph-1 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#graph-1 .icon-shape p,#graph-1 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#graph-1 .icon-shape rect,#graph-1 .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#graph-1 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style>
<g>
<marker orient="auto" markerHeight="8" markerWidth="8" markerUnits="userSpaceOnUse" refY="5" refX="5" viewBox="0 0 10 10" class="marker flowchart-v2" id="graph-1_flowchart-v2-pointEnd">
<path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"></path>
</marker>
<marker orient="auto" markerHeight="8" markerWidth="8" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart-v2" id="graph-1_flowchart-v2-pointStart">
<path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"></path>
</marker>
<marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart-v2" id="graph-1_flowchart-v2-circleEnd">
<circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle>
</marker>
<marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart-v2" id="graph-1_flowchart-v2-circleStart">
<circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"></circle>
</marker>
<marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart-v2" id="graph-1_flowchart-v2-crossEnd">
<path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path>
</marker>
<marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart-v2" id="graph-1_flowchart-v2-crossStart">
<path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"></path>
</marker>
<g class="root">
<g class="clusters"></g>
<g class="edgePaths">
<path marker-end="url(#graph-1_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_A_B_0" d="M221.031,62L221.031,68.167C221.031,74.333,221.031,86.667,221.031,98.333C221.031,110,221.031,121,221.031,126.5L221.031,132"></path>
<path marker-end="url(#graph-1_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_B_C_0" d="M221.031,190L221.031,194.167C221.031,198.333,221.031,206.667,221.102,214.417C221.172,222.167,221.312,229.334,221.383,232.917L221.453,236.501"></path>
<path marker-end="url(#graph-1_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_D_0" d="M178.604,342.854L159.276,356.092C139.947,369.33,101.29,395.806,81.961,414.543C62.633,433.281,62.633,444.281,62.633,449.781L62.633,455.281"></path>
<path marker-end="url(#graph-1_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_E_0" d="M221.531,385.781L221.448,391.865C221.365,397.948,221.198,410.115,221.115,421.698C221.031,433.281,221.031,444.281,221.031,449.781L221.031,455.281"></path>
<path marker-end="url(#graph-1_flowchart-v2-pointEnd)" style="" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" id="L_C_F_0" d="M264.02,343.293L282.605,356.457C301.19,369.622,338.361,395.952,356.946,414.616C375.531,433.281,375.531,444.281,375.531,449.781L375.531,455.281"></path>
</g>
<g class="edgeLabels">
<g transform="translate(221.03125, 99)" class="edgeLabel">
<g transform="translate(-38.96875, -12)" class="label">
<foreignObject height="24" width="77.9375">
<div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml">
<span class="edgeLabel">
<p>Get money</p>
</span>
</div>
</foreignObject>
</g>
</g>
<g class="edgeLabel">
<g transform="translate(0, 0)" class="label">
<foreignObject height="0" width="0">
<div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml">
<span class="edgeLabel"></span>
</div>
</foreignObject>
</g>
</g>
<g transform="translate(62.6328125, 422.28125)" class="edgeLabel">
<g transform="translate(-14.125, -12)" class="label">
<foreignObject height="24" width="28.25">
<div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml">
<span class="edgeLabel">
<p>One</p>
</span>
</div>
</foreignObject>
</g>
</g>
<g transform="translate(221.03125, 422.28125)" class="edgeLabel">
<g transform="translate(-13.7890625, -12)" class="label">
<foreignObject height="24" width="27.578125">
<div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml">
<span class="edgeLabel">
<p>Two</p>
</span>
</div>
</foreignObject>
</g>
</g>
<g transform="translate(375.53125, 422.28125)" class="edgeLabel">
<g transform="translate(-20.8515625, -12)" class="label">
<foreignObject height="24" width="41.703125">
<div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" class="labelBkg" xmlns="http://www.w3.org/1999/xhtml">
<span class="edgeLabel">
<p>Three</p>
</span>
</div>
</foreignObject>
</g>
</g>
</g>
<g class="nodes">
<g transform="translate(221.03125, 35)" id="flowchart-A-0" class="node default">
<rect height="54" width="130.078125" y="-27" x="-65.0390625" style="" class="basic label-container"></rect>
<g transform="translate(-35.0390625, -12)" style="" class="label">
<rect></rect>
<foreignObject height="24" width="70.078125">
<div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
<p>Christmas</p>
</span>
</div>
</foreignObject>
</g>
</g>
<g transform="translate(221.03125, 163)" id="flowchart-B-1" class="node default">
<rect height="54" width="117.203125" y="-27" x="-58.6015625" ry="5" rx="5" style="" class="basic label-container"></rect>
<g transform="translate(-43.6015625, -12)" style="" class="label">
<rect></rect>
<foreignObject height="24" width="87.203125">
<div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
<p>Go shopping</p>
</span>
</div>
</foreignObject>
</g>
</g>
<g transform="translate(221.03125, 312.640625)" id="flowchart-C-3" class="node default">
<polygon transform="translate(-72.640625,72.640625)" class="label-container" points="72.640625,0 145.28125,-72.640625 72.640625,-145.28125 0,-72.640625"></polygon>
<g transform="translate(-45.640625, -12)" style="" class="label">
<rect></rect>
<foreignObject height="24" width="91.28125">
<div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
<p>Let me think</p>
</span>
</div>
</foreignObject>
</g>
</g>
<g transform="translate(62.6328125, 486.28125)" id="flowchart-D-5" class="node default">
<rect height="54" width="109.265625" y="-27" x="-54.6328125" style="" class="basic label-container"></rect>
<g transform="translate(-24.6328125, -12)" style="" class="label">
<rect></rect>
<foreignObject height="24" width="49.265625">
<div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
<p>Laptop</p>
</span>
</div>
</foreignObject>
</g>
</g>
<g transform="translate(221.03125, 486.28125)" id="flowchart-E-7" class="node default">
<rect height="54" width="107.53125" y="-27" x="-53.765625" style="" class="basic label-container"></rect>
<g transform="translate(-23.765625, -12)" style="" class="label">
<rect></rect>
<foreignObject height="24" width="47.53125">
<div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
<p>iPhone</p>
</span>
</div>
</foreignObject>
</g>
</g>
<g transform="translate(375.53125, 486.28125)" id="flowchart-F-9" class="node default">
<rect height="54" width="101.46875" y="-27" x="-50.734375" style="" class="basic label-container"></rect>
<g transform="translate(-20.734375, -12)" style="" class="label">
<rect></rect>
<foreignObject height="24" width="41.46875">
<div style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;" xmlns="http://www.w3.org/1999/xhtml">
<span class="nodeLabel">
<p>
<i class="fa fa-car"></i> Car
</p>
</span>
</div>
</foreignObject>
</g>
</g>
</g>
</g>
</g>
</svg>
Is it well formed? Regards.