I was trying to convert an svg document to JPG using batik (I tried both 1.8 and 1.7 versions with the same reuslt). Unluckily some svg elements (clippath, fegaussianblur, fecomponenttransfer, femerge) cause the following (or similar, depending on the svg tag) trace:
org.apache.batik.transcoder.TranscoderException: null
Enclosed Exception:
The current document is unable to create an element of the requested type (namespace: http://www.w3.org/2000/svg, name: clippath).
at org.apache.batik.transcoder.XMLAbstractTranscoder.transcode(Unknown Source)
at org.apache.batik.transcoder.SVGAbstractTranscoder.transcode(Unknown Source)
Can anyone point out any solution for this problem?
Thanks,
Laura
UPDATE: Here is my input file:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- $Id$ -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400"
height="300"> <defs> <clippath id="shielddx"> <rect
rx="0" ry="0" fill="none" x="0" y="0" width="9999" height="300"
stroke-width="0.000001"></rect> </clippath> <clippath id="shielddy"> <rect
fill="none" x="0" y="0" width="331" height="210"></rect> </clippath> <filter
id="a5a87bf2-0ea3-4664-8ceb-bd50b883a117" height="120%"> <fegaussianblur
in="SourceAlpha" stdDeviation="3"></fegaussianblur> <fecomponenttransfer>
<fefunca type="linear" slope="0.2"></fefunca></fecomponenttransfer> <femerge> <femergenode></femergenode>
<femergenode in="SourceGraphic"></femergenode></femerge> </filter></defs> <rect rx="0" ry="0"
fill="#2D2D2D" x="0" y="0" width="400" height="300"
stroke-width="0.000001"></rect> <rect rx="0" ry="0" fill="#2D2D2D"
x="59" y="40" width="331" height="210" stroke-width="0.000001"></rect>
<g zIndex="1"></g> <g zIndex="1"> <path fill="none"
d="M 59 198.5 L 390 198.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 145.5 L 390 145.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 93.5 L 390 93.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 40.5 L 390 40.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path> <path fill="none"
d="M 59 250.5 L 390 250.5" stroke="#7E7E7E" stroke-width="1"
stroke-dasharray="8,3" zIndex="1"></path></g> <g zIndex="2"> <path
fill="none" d="M 224.5 250 L 224.5 256" stroke="#7E7E7E"
stroke-width="1"></path> <path fill="none" d="M 306.5 250 L 306.5 256"
stroke="#7E7E7E" stroke-width="1"></path> <path fill="none"
d="M 389.5 250 L 389.5 256" stroke="#7E7E7E" stroke-width="1"></path> <path
fill="none" d="M 141.5 250 L 141.5 256" stroke="#7E7E7E"
stroke-width="1"></path> <path fill="none" d="M 59 250.5 L 390 250.5"
stroke="#7E7E7E" stroke-width="1" zIndex="7" visibility="visible"></path> </g>
<g zIndex="2"> <text x="23" y="145"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;color:#7E7E7E;font-weight:normal;fill:#7E7E7E;"
zIndex="7" transform="rotate(270 23 145)" text-anchor="middle"
visibility="visible"> <tspan x="23">Quarter Overview</tspan></text></g> <g
zIndex="3"> <g visibility="visible" zIndex="0.1"
transform="translate(59,40)" clip-path="url(#shielddy)"> <rect
fill="#1E97E3" x="18" y="110.25" width="47" height="31.55000000000001"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect> <rect
fill="#1E97E3" x="101" y="36.75" width="47" height="57.75"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect> <rect
fill="#1E97E3" x="183" y="68.25" width="47" height="84.05000000000001"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect> <rect
fill="#1E97E3" x="266" y="94.5" width="47" height="78.80000000000001"
stroke-width="0.000001" stroke="#FFFFFF" rx="0" ry="0"></rect></g> <g
visibility="visible" zIndex="0.1" transform="translate(59,40)"></g></g> <text
x="200" y="25"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:16px;color:#FFFFFF;top:10;fill:#FFFFFF;"
text-anchor="middle" zIndex="4"> <tspan x="200">Quarterly
Performance</tspan></text> <g zIndex="7" transform="translate(166,273)"> <g
zIndex="1" clip-path="url(#shielddx)"> <g> <g zIndex="1"
transform="translate(8,3)"> <path fill="#1E97E3"
d="M 1 6 L 11 6 11 16 1 16 Z" style="cursor:pointer;" stroke="#1E97E3"
stroke-width="0.000001"></path> <text x="17" y="15"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:12px;cursor:pointer;color:#A5A5A5;fill:#A5A5A5;"
text-anchor="start" zIndex="2"> <tspan x="17">Series 1</tspan> </text>
</g> </g> </g> </g> <g zIndex="7"> <text x="100.375" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="100.375">Q1</tspan> </text>
<text x="183.125" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="183.125">Q2</tspan> </text>
<text x="265.875" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="265.875">Q3</tspan></text>
<text x="348.625" y="267"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:63px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="middle" visibility="visible"> <tspan x="348.625">Q4</tspan> </text></g>
<g zIndex="7"> <text x="51" y="256.1"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">-10</tspan></text>
<text x="51" y="203.6"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">0</tspan></text>
<text x="51" y="151.1"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">10</tspan></text>
<text x="51" y="98.6"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">20</tspan></text>
<text x="51" y="46.1"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font- size:11px;width:146px;color:#7E7E7E;line-height:14px;fill:#7E7E7E;"
text-anchor="end" visibility="visible"> <tspan x="51">30</tspan></text></g>
<text x="64" y="60"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="start" zIndex="8"> <tspan x="64">Demo</tspan></text> <text
x="385" y="60"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="end" zIndex="8"> <tspan x="385">Demo</tspan></text> <text
x="64" y="245"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="start" zIndex="8"> <tspan x="64">Demo</tspan></text> <text
x="385" y="245"
style="font-family:Segoe UI, Tahoma, Verdana, sans-serif;font-size:16px;cursor:pointer;color:#999999;fill:#999999;"
text-anchor="end" zIndex="8"> <tspan x="385">Demo</tspan></text> <g
zIndex="9"> <g visibility="visible" zIndex="1"
transform="translate(59,40)" clip-path="url(#shielddy)"> <rect
fill="rgb(192,192,192)" x="18" y="110.25" width="47"
height="31.55000000000001" isTracker="1463661560361"
fill-opacity="0.0001" visibility="visible" style=""></rect> <rect
fill="rgb(192,192,192)" x="101" y="36.75" width="47" height="57.75"
isTracker="1463661560361" fill-opacity="0.0001" visibility="visible"
style=""></rect> <rect fill="rgb(192,192,192)" x="183" y="68.25"
width="47" height="84.05000000000001" isTracker="1463661560361"
fill-opacity="0.0001" visibility="visible" style=""></rect> <rect
fill="rgb(192,192,192)" x="266" y="94.5" width="47"
height="78.80000000000001" isTracker="1463661560361"
fill-opacity="0.0001" visibility="visible" style=""></rect> </g> </g> </svg>
SVG is a case sensitive language. clippath is invalid, the correct name is clipPath.
Related
Please look at eaExperiment. I want to make a definition which takes StartArrow definition and rotates it by 180 degrees.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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="http://www.w3.org/2000/svg" width="450" height="400" version="1.1">
<style type="text/css">
<![CDATA[
rect {fill:white; stroke: black; stroke-width: 1;}
text {fill: black; font-family: sans-serif; font-size: 10pt}
line {stroke:black; stroke-width:2}
]]>
</style>
<defs>
<marker orient="auto" refY="0.0" refX="0.0" id="StartArrow" style="overflow:visible;">
<path style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " />
</marker>
<use id="eaExperiment" href="#StartArrow" transform="rotate(180)" />
<marker orient="auto" refY="0.0" refX="0.0" id="EndArrow" style="overflow:visible;">
<path style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " transform="rotate(180)" />
</marker>
<svg id="Box">
<rect width="100" height="85" x="1" y="1" />
<text x="5" y="20">The box</text>
<svg x="10" y="25">
<rect width="70" height="50" x="1" y="1" />
<text x="5" y="20">Box</text>
<text x="5" y="40">Contents</text>
</svg>
</svg>
</defs>
<svg>
<svg x="10" y="120">
<rect width="100" height="50" x="1" y="1" />
<text x="5" y="20">Data</text>
<text x="5" y="40">source</text>
</svg>
<svg x="150">
<use href="#Box" y="1" />
<use href="#Box" y="100" />
<use href="#Box" y="200" />
</svg>
<svg x="300" y="120">
<rect width="100" height="50" x="1" y="1" />
<text x="5" y="20">Database</text>
<text x="5" y="40">server</text>
</svg>
<line x1="100" y1="120" x2="148" y2="40" style="marker-end:url(#EndArrow)" />
<line x1="110" y1="150" x2="147" y2="150" style="marker-end:url(#EndArrow)" />
<line x1="100" y1="170" x2="148" y2="240" style="marker-end:url(#EndArrow)" />
<line x1="254" y1="40" x2="297" y2="120" style="marker-start:url(#StartArrow); marker-end:url(#EndArrow)" />
<line x1="250" y1="150" x2="297" y2="150" style="marker-start:url(#eaExperiment); marker-end:url(#EndArrow)" />
<line x1="250" y1="240" x2="297" y2="170" style="marker-end:url(#EndArrow)" />
</svg>
</svg>
I am definitely doing it wrong, but what is the right way?
You need separate <marker> elements, but their content can be reused with <use> elements. For example like this:
<defs>
<path id="arrow" style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " />
<marker orient="auto" refY="0.0" refX="0.0" id="StartArrow" style="overflow:visible;">
<use xlink:href="#arrow" />
</marker>
<marker orient="auto" refY="0.0" refX="0.0" id="EndArrow" style="overflow:visible;">
<use xlink:href="#arrow" transform="rotate(180)" />
</marker>
</defs>
(While the use of the xlink namespace with href is deprecated and also from a practical perspective no longer needed in current browsers, I tend to still use it for the sake of other renderers, Inkscape for example.)
I've been mightily struggling with being able to properly size and scale an svg image in a web page and have it flow properly. I've decided to give up and convert it to a png.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="1920" height="165px"
viewBox="0 0 1920 165"
>
<defs>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Bitter');
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
#import url('https://fonts.googleapis.com/css?family=Volkhov|Vollkorn');
</style>
<style>
:root {
--graphics: #670309;
--logo-text: #282B28;
--services: #fff;
--bottom-bar-font-size: 0.8em;
}
.house{
fill: none;
stroke: var(--graphics);
}
.bottom{
fill: var(--graphics);
stroke: none;
}
.logo{
fill: var(--logo-text);
stroke: none;
}
.features{
fill: #282B28;
stroke: none;
}
.services {
fill: var(--services);
stroke: none;
text-anchor: start;
alignment-baseline="middle"
font-weight="400"
font-family="Roboto Condensed"
letter-spacing="0.03em"
}
.service {
font-size: var(--bottom-bar-font-size);
font-family="Roboto Condensed";
}
.separator {
font-size: var(--bottom-bar-font-size);
font-family="Roboto Condensed";
}
</style>
</defs>
<g id="whole-logo" transform="translate(0,0)scale(1)">
<svg>
<!-- ROOF -->
<path d="m 5 100 l 90 -50 l 90 50" stroke-width="15" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- CHIMNEY -->
<path d="m 155 60 l 0 20" stroke-width="15" stroke-linecap="butt" class="house"/>
<!-- LEFT WALL -->
<path d="m 25 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- RIGHT WALL -->
<path d="m 165 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- DOOR -->
<rect x="60" y="95" height="45" width="25" class="features"/>
<!-- SINGLE WINDOW DEFINITION -->
<defs>
<rect id="window" x="0" y="0" width="10" height="10" class="features"/>
</defs>
<!-- WINDOWS -->
<g transform="translate(105,95)">
<use href="#window" transform="translate(0 0)"/>
<use href="#window" transform="translate(0 12)"/>
<use href="#window" transform="translate(12 0)"/>
<use href="#window" transform="translate(12 12)"/>
</g>
<!-- BOTTOM BAR AND TEXT -->
<g transform="translate(0,140)">
<svg width="100%" height="25px">
<rect x="0" y="0" width="100%" height="25px" class="bottom" stroke-width="0"/>
<text x="1.5em" y="65%" class="services" font-family="Roboto Condensed" >
<tspan class="service">residential</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">commercial</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">pre-purchase</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">pre-sale</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">warranty</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">expert-witness</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">sewer</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">radon</tspan>
</text>
</svg>
</g>
<!-- HOUSE DETECTIVES LLC -->
<g id="biz-name" transform="translate(265,140)scale(0.8)">
<line x1="0" x2="500" y1="0" y2="0" style="stroke: green"></line>
<text dx="70px" dy="0"
text-anchor="start"
font-size="38px"
font-family="Roboto Slab"
font-weight="bold"
transform="rotate(-90)"
class="logo">the</text>
<text dx="0" dy="0"
text-anchor="start"
font-size="78px"
font-family="Roboto Slab"
font-weight="bold"
class="logo">
<tspan class="name" x="5" dx="0" dy="-73">House</tspan>
<tspan class="name" x="-70" dx="0" dy="65">Detectives</tspan>
<tspan class="name" x="0" dx="330" dy="-2" font-size="24px">llc</tspan>
</text>
</g>
</svg>
</g>
</svg>
My svg renders just fine in a browser, and I've validated it with validator.nu. However, it does not open properly in any vector editor I've tried including Inkscape and others. For instance, Inkscape looks like:
It also does not convert properly with ImageMagick.
I get pretty close with drawsvg.org
What should I try next?
Percentage values are not valid in viewBox attributes. The purpose of the viewBox attribute is to tell the browser the dimensions of the bounding box around the content in the SVG.
In the case of your SVG a suitabel viewBox would be:
viewBox="0 0 620 165"
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="100%" height="165px"
viewBox="0 0 620 165"
>
<defs>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Bitter');
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
#import url('https://fonts.googleapis.com/css?family=Volkhov|Vollkorn');
</style>
<style>
:root {
--graphics: #670309;
--logo-text: #282B28;
--services: #fff;
--bottom-bar-font-size: 0.8em;
}
.house{
fill: none;
stroke: var(--graphics);
}
.bottom{
fill: var(--graphics);
stroke: none;
}
.logo{
fill: var(--logo-text);
stroke: none;
}
.features{
fill: #282B28;
stroke: none;
}
.services {
fill: var(--services);
stroke: none;
text-anchor: start;
alignment-baseline="middle"
font-weight="400"
font-family="Roboto Condensed"
letter-spacing="0.03em"
}
.service {
font-size: var(--bottom-bar-font-size);
font-family="Roboto Condensed";
}
.separator {
font-size: var(--bottom-bar-font-size);
font-family="Roboto Condensed";
}
</style>
</defs>
<g id="whole-logo" transform="translate(0,0)scale(1)">
<svg>
<!-- ROOF -->
<path d="m 5 100 l 90 -50 l 90 50" stroke-width="15" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- CHIMNEY -->
<path d="m 155 60 l 0 20" stroke-width="15" stroke-linecap="butt" class="house"/>
<!-- LEFT WALL -->
<path d="m 25 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- RIGHT WALL -->
<path d="m 165 90 l 0 60" stroke-width="12" stroke-linecap="butt" stroke-linejoin="miter" class="house"/>
<!-- DOOR -->
<rect x="60" y="95" height="45" width="25" class="features"/>
<!-- SINGLE WINDOW DEFINITION -->
<defs>
<rect id="window" x="0" y="0" width="10" height="10" class="features"/>
</defs>
<!-- WINDOWS -->
<g transform="translate(105,95)">
<use href="#window" transform="translate(0 0)"/>
<use href="#window" transform="translate(0 12)"/>
<use href="#window" transform="translate(12 0)"/>
<use href="#window" transform="translate(12 12)"/>
</g>
<!-- BOTTOM BAR AND TEXT -->
<g transform="translate(0,140)">
<svg width="100%" height="25px">
<rect x="0" y="0" width="100%" height="25px" class="bottom" stroke-width="0"/>
<text x="1.5em" y="65%" class="services" font-family="Roboto Condensed" >
<tspan class="service">residential</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">commercial</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">pre-purchase</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">pre-sale</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">warranty</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">expert-witness</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">sewer</tspan>
<tspan class="separator" dx="5px">■</tspan>
<tspan class="service" dx="5px">radon</tspan>
</text>
</svg>
</g>
<!-- HOUSE DETECTIVES LLC -->
<g id="biz-name" transform="translate(265,140)scale(0.8)">
<line x1="0" x2="500" y1="0" y2="0" style="stroke: green"></line>
<text dx="70px" dy="0"
text-anchor="start"
font-size="38px"
font-family="Roboto Slab"
font-weight="bold"
transform="rotate(-90)"
class="logo">the</text>
<text dx="0" dy="0"
text-anchor="start"
font-size="78px"
font-family="Roboto Slab"
font-weight="bold"
class="logo">
<tspan class="name" x="5" dx="0" dy="-73">House</tspan>
<tspan class="name" x="-70" dx="0" dy="65">Detectives</tspan>
<tspan class="name" x="0" dx="330" dy="-2" font-size="24px">llc</tspan>
</text>
</g>
</svg>
</g>
</svg>
I have some SVG here which displays fine inside a div, but not inside an img with src="data:image/svg+xml;utf8, etc .....
I've swapped the svg for more simple ones and its fine, so I know it's something odd about my actual svg code.
<svg width="500" height="420">
<style id="mystyle" type="text/css">.node { cursor: pointer; } .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font: 10px sans-serif; } .link { fill: none; stroke: #000; stroke-width: 1px; } .erd-bc { fill: none; stroke: #aaa; stroke-width: 2px; } marker { fill: none; stroke: #000; stroke-width: 1px; } </style><g transform="translate(120,20)">
<defs>
<marker viewBox="0 0 10 10" id="card-many-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 0 L 0 5 L 10 10 M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-many-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 0 L 10 5 L 0 10 M 10 5 L 0 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 5 L 0 5"/>
</marker>
</defs>
<path class="link" marker-end="" marker-start="url(#card-many-start)" d="M60,275C60,300 60,300 60,325" style="opacity: 1;"/>
<path class="link" marker-end="url(#card-many-end)" marker-start="" d="M130,155C130,180 60,180 60,205" style="opacity: 1;"/>
<path class="link" marker-end="url(#card-many-end)" marker-start="" d="M130,155C130,180 200,180 200,205" style="opacity: 1;"/>
<path class="link" marker-end="url(#card-many-end)" marker-start="" d="M130,45C130,70 130,70 130,95" style="opacity: 1;"/>
<g opacity="1" class="node" transform="translate(200,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation Bindings</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB1</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(60,350)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB2</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g><g opacity="1" class="node" transform="translate(60,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Intersection</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB3</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(130,130)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Port</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB4</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">WEB_SERVICE_ID</text>
</g><g opacity="1" class="node" transform="translate(130,20)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Web Service</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB5</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g>
</g>
You need to URI encode the file and you also need to give it proper namespaces since you're not embedding it in a html file any more. E.g.
<img src='data:image/svg+xml;charset=utf-8,<svg width="500" height="420" xmlns="http://www.w3.org/2000/svg">
<style id="mystyle" type="text/css">.node { cursor: pointer; } .node circle { fill: %23fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font: 10px sans-serif; } .link { fill: none; stroke: %23000; stroke-width: 1px; } .erd-bc { fill: none; stroke: %23aaa; stroke-width: 2px; } marker { fill: none; stroke: %23000; stroke-width: 1px; } </style><g transform="translate(120,20)">
<defs>
<marker viewBox="0 0 10 10" id="card-many-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 0 L 0 5 L 10 10 M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 5 L 10 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-many-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 0 0 L 10 5 L 0 10 M 10 5 L 0 5"/>
</marker>
</defs>
<defs>
<marker viewBox="0 0 10 10" id="card-one-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;">
<path d="M 10 5 L 0 5"/>
</marker>
</defs>
<path class="link" marker-end="" marker-start="url(%23card-many-start)" d="M60,275C60,300 60,300 60,325" style="opacity: 1;"/>
<path class="link" marker-end="url(%23card-many-end)" marker-start="" d="M130,155C130,180 60,180 60,205" style="opacity: 1;"/>
<path class="link" marker-end="url(%23card-many-end)" marker-start="" d="M130,155C130,180 200,180 200,205" style="opacity: 1;"/>
<path class="link" marker-end="url(%23card-many-end)" marker-start="" d="M130,45C130,70 130,70 130,95" style="opacity: 1;"/>
<g opacity="1" class="node" transform="translate(200,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation Bindings</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB1</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(60,350)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Operation</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB2</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g><g opacity="1" class="node" transform="translate(60,240)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Intersection</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB3</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">PORT_ID</text>
</g><g opacity="1" class="node" transform="translate(130,130)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Port</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB4</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle">WEB_SERVICE_ID</text>
</g><g opacity="1" class="node" transform="translate(130,20)">
<g class="node-bc" transform="translate(-60,-25)">
<rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/>
<text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging">Web Service</text>
<text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging">TAB5</text>
</g>
<text dy="-5em" class="fkcol" text-anchor="middle"/>
</g>
</g>
</svg>'></img>
Have a code:
<svg id="view-svg-problem" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id='svg-marker-start' orient='auto' markerUnits="strokeWidth" markerWidth='10' markerHeight='10' refX='9' refY='5' class="svg-path-dec">
<rect x="1" y="1" width="8" height="8" />
<text x="3" y="7.1" font-weight="bold" font-family="Arial" font-size="5.5" fill="white" stroke="transparent">S</text>
</marker>
<marker id='svg-marker-end' orient='auto' markerUnits="strokeWidth" markerWidth='10' markerHeight='10' refX='5' refY='9' class="svg-path-dec">
<rect x="1" y="1" width="8" height="8" />
<text x="3" y="7.1" font-weight="bold" font-family="Arial" font-size="5.5" fill="white" stroke="transparent">F</text>
</marker>
</defs>
<path id="view-path-svg" class="svg-path" marker-start="url(#svg-marker-start)" marker-end="url(#svg-marker-end)" d="M 655,343 Q747,317 705.5,311 Q664,305 708,292 Q752,279 713.5,254 Q675,229 711.5,212.5 Q748,196 706.5,189 Q665,182 687,157.5 Q709,133 679.5,126.5 Q650,120 663,106 T676,92"></path>
</svg>
So result looks like on the picture:
Easy to see that marker-start aligns well with the path, but marker-end doesn't want to. Is there a solution to the problem?
I have a svg file which I want to be converted into jpg/png. Probem is that conversion is fine if there is no background image. But when I try to put some background image its not being rendered in the converted image and showing plain background color.
content of svg:
<svg height="370" version="1.1" width="350" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.5px;">
<defs>
<pattern id="38A07B9C-47E8-4E02-A005-E6E4443FE5D0" x="0" y="0" patternUnits="userSpaceOnUse" height="300" width="300" patternTransform="matrix(1,0,0,1,0,0) translate(0,20)">
<image x="0" y="0" href="/home/mahad/public_html/svg/user-backgrounds/4f41f6a2a75dc_back.png" width="300" height="300"/>
</pattern>
</defs>
<rect x="0" y="0" width="350" height="370" r="0" rx="0" ry="0" fill="#ffffff" stroke="none" style=""/>
<rect x="0" y="20" width="350" height="350" r="0" rx="0" ry="0" fill="url(#38A07B9C-47E8-4E02-A005-E6E4443FE5D0)" stroke="none" style="fill: url("#38A07B9C-47E8-4E02-A005-E6E4443FE5D0") rgb(0, 0, 0); opacity: 0.38;" opacity="0.38"/>
<rect x="0" y="20" width="14" height="14" r="0" rx="0" ry="0" fill="#000000" stroke="none" style=""/>
<text style="text-anchor: middle; font: 12px "Arial"; opacity: 1;" x="100" y="100" text-anchor="middle" font="10px "Arial"" stroke="none" fill="#ff0000" font-size="12px" opacity="1" transform="matrix(1,0,0,1,73,92)">
<tspan dy="4.5">helllloooo...</tspan>
</text>
</svg>
conversion command:
echo exec("/usr/bin/convert /home/public_html/qr.svg /home/public_html/qr.png");
please help
In my case, installing librsvg2-bin fixed the problem:
sudo apt-get install librsvg2-bin