The image is chopping off when i am trying to convert svg file to png image using org.apache.batik.apps.rasterizer.SVGConverter. The java code is mentioned below.
SVGConverter svgConverter = new SVGConverter();
svgConverter.setDestinationType(DestinationType.PNG);
svgConverter.setSources(new String[]{ new File(svgsource).toURL().toString() });
svgConverter.setDst(new File(imgDest));
svgConverter.execute();
Also please find the code for SVG file.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<line x1="10" y1="0" x2="10" y2="500" style="stroke: #000000; stroke-width: 1;" />
<line x1="10" y1="500" x2="500" y2="500" style="stroke: #000000; stroke-width: 1;" />
<text x="0" y="520" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >3PA</text>
<line x1="100" y1="0" x2="100" y2="500" style="stroke: darkgray; stroke-width: 0.2" />
<text x="100" y="520" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >3PB</text>
<line x1="200" y1="0" x2="200" y2="500" style="stroke: darkgray; stroke-width: 0.2" />
<text x="200" y="520" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >3PC</text>
<line x1="300" y1="0" x2="300" y2="500" style="stroke: darkgray; stroke-width: 0.2" />
<text x="300" y="520" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >4PA</text>
<line x1="400" y1="0" x2="400" y2="500" style="stroke: darkgray; stroke-width: 0.2" />
<text x="400" y="520" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >4PB</text>
<line x1="10" y1="100" x2="500" y2="100" style="stroke: darkgray; stroke-width: 0.2" />
<line x1="10" y1="200" x2="500" y2="200" style="stroke: darkgray; stroke-width: 0.2" />
<line x1="10" y1="300" x2="500" y2="300" style="stroke: darkgray; stroke-width: 0.2" />
<line x1="10" y1="400" x2="500" y2="400" style="stroke: darkgray; stroke-width: 0.2" />
<line x1="10" y1="450" x2="100" y2="450"
style="stroke:yellow; stroke-width:5; stroke-linejoin:miter" />
<line x1="100" y1="450" x2="200" y2="330"
style="stroke:yellow; stroke-width:5; stroke-linejoin:miter" />
<line x1="200" y1="330" x2="300" y2="380"
style="stroke:yellow; stroke-width:5; stroke-linejoin:miter" />
<polygon points="300,380 400,320 400,360 300,380"
style="fill:paleturquoise; stroke: darkturquoise; stroke-width:1" />
<line x1="100" y1="420" x2="100" y2="460"
style="fill:darkturquoise; stroke: darkturquoise; stroke-width:7" />
<line x1="200" y1="340" x2="200" y2="380"
style="stroke:darkturquoise; stroke: darkturquoise; stroke-width:7" />
<line x1="300" y1="310" x2="300" y2="350"
style="stroke:darkturquoise; stroke: darkturquoise; stroke-width:7" />
<line x1="400" y1="320" x2="400" y2="360"
style="stroke:darkturquoise; stroke: darkturquoise; stroke-width:7" />
<text x="400" y="320" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >320</text>
<text x="400" y="360" style="stroke: none; fill: #000000; font-family: Arial; font-size: 10px;" >360</text>
</svg>
Please also find the online editor image and png file which is generated by the Java code .
Please help me to get the full image as online image editor.
Mention the height and width in svg tag like
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
Related
I have the following svg I need to render in as a standalone svg file:
<svg width="89" height="55" viewBox="0 0 89 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
#font-face {
font-family: 'Press Start 2P';
src: url('https://fonts.googleapis.com/css?family=Press+Start+2P');
}
</style>
<rect width="89" height="55" fill="black" />
<rect x="5.5" y="5.5" width="78" height="44" fill="#0000FF" />
<text text-anchor="middle" x="44.5" y="31" fill=" white" font-family="Press Start 2P" font-size="12" letter-spacing="0em">1234</text>
<rect x="78" y="45" width="9" height="8" fill="#FF4F0A" />
<rect x="5.5" y="5.5" width="78" height="44" stroke="#FF4F0A" stroke-width="3" />
<path d="M81.4286 51V50.4286H81V49.8571H81.8571V50.4286H83.1429V49.2857H81.4286V48.7143H81V47.5714H81.4286V47H83.5714V47.5714H84V48.1429H83.1429V47.5714H81.8571V48.7143H83.5714V49.2857H84V50.4286H83.5714V51H81.4286Z" fill="#0000FF" />
</svg>
I am trying to use a given font (Press Start 2P) but it does not render, neither locally when I open the svg file nor with the following data uri
data:image/svg+xml,%3Csvg%20width%3D%2289%22%20height%3D%2255%22%20viewBox%3D%220%200%2089%2055%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%20%20%20%20%3Cstyle%3E%20%20%20%20%40font-face%20%7B%20%20%20%20%20%20%20%20font-family%3A%20%27Press%20Start%202P%27%3B%20%20%20%20%20%20%20%20src%3A%20url%28%27https%3A//fonts.googleapis.com/css%3Ffamily%3DPress%2BStart%2B2P%27%29%3B%20%20%20%20%7D%20%20%20%20%3C/style%3E%20%20%20%20%3Crect%20width%3D%2289%22%20height%3D%2255%22%20fill%3D%22black%22%20/%3E%20%20%20%20%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2278%22%20height%3D%2244%22%20fill%3D%22%230000FF%22%20/%3E%20%20%20%20%3Ctext%20text-anchor%3D%22middle%22%20x%3D%2244.5%22%20y%3D%2231%22%20fill%3D%22%20white%22%20font-family%3D%22Press%20Start%202P%22%20font-size%3D%2212%22%20letter-spacing%3D%220em%22%3E1234%3C/text%3E%20%20%20%20%3Crect%20x%3D%2278%22%20y%3D%2245%22%20width%3D%229%22%20height%3D%228%22%20fill%3D%22%23FF4F0A%22%20/%3E%20%20%20%20%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%2278%22%20height%3D%2244%22%20stroke%3D%22%23FF4F0A%22%20stroke-width%3D%223%22%20/%3E%20%20%20%20%3Cpath%20d%3D%22M81.4286%2051V50.4286H81V49.8571H81.8571V50.4286H83.1429V49.2857H81.4286V48.7143H81V47.5714H81.4286V47H83.5714V47.5714H84V48.1429H83.1429V47.5714H81.8571V48.7143H83.5714V49.2857H84V50.4286H83.5714V51H81.4286Z%22%20fill%3D%22%230000FF%22%20/%3E%3C/svg%3E
EDIT
After comment, I tried to embed the whole font but still does not work
<svg width="89" height="55" viewBox="0 0 89 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
#font-face {
font-family: "Press Start 2P";
src: url(data:application/font-woff;charset=utf-8;base64,..) format("woff");
font-weight:normal;font-style:normal;
}
</style>
</defs>
<rect width="89" height="55" fill="#E5E5E5" />
<rect width="89" height="55" fill="#29296E" />
<rect x="5.5" y="5.5" width="78" height="44" fill="#0000FF" />
<text text-anchor="middle" x="44.5" y="31" fill=" white" font-family="Press Start 2P" font-size="12">
{}azer
</text>
<rect x="5.5" y="5.5" width="78" height="44" stroke="#FF4F0A" stroke-width="3" />
<rect x="47" y="45" width="41" height="8" fill="#FF4F0A" />
<text text-anchor="end" x="86" y="52" fill=" white" font-family="Press Start 2P" font-size="8" letter-spacing="0em">
{}
</text>
</svg>
the base64 comes from the base64 encoding of the .ttf file
Your first example doesn't work since you're using a css URL as a font file URL.
Open your google font URL and copy the actual #font-face rule
The returned css depends on your current browser – yeah, user agent sniffing!
#font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/pressstart2p/v14/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2) format('woff2');
}
Otherwise use a service like google web fonts helper to get the actual font file URLs.
False friends: css properties vs. svg attributes
Svg's font related attributes like font-family apparently don't work well with css style definitions.
Better apply font-family within the <style> element like so:
<svg viewBox="0 0 89 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
#font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/pressstart2p/v14/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2) format('woff2');
}
text {
font-family: 'Press Start 2P';
font-size: 12;
}
</style>
</defs>
<rect width="89" height="55" fill="black" />
<rect x="5.5" y="5.5" width="78" height="44" fill="#0000FF" />
<text text-anchor="middle" x="44.5" y="31" fill=" white">1234</text>
<rect x="78" y="45" width="9" height="8" fill="#FF4F0A" />
<rect x="5.5" y="5.5" width="78" height="44" stroke="#FF4F0A" stroke-width="3" />
</svg>
Embedded fonts
Some services provide a way to generate/convert font files to base64 data URLs like transfonter
Embedded font example
<svg viewBox="0 0 89 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
#font-face {
font-family: 'Press Start 2P';
font-style: normal;
font-weight: 400;
src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
font-weight: normal;
font-style: normal;
}
text {
font-family: 'Press Start 2P';
font-size: 12;
}
</style>
</defs>
<rect width="89" height="55" fill="black" />
<rect x="5.5" y="5.5" width="78" height="44" fill="#0000FF" />
<text text-anchor="middle" x="44.5" y="31" fill=" white">1234</text>
<rect x="78" y="45" width="9" height="8" fill="#FF4F0A" />
<rect x="5.5" y="5.5" width="78" height="44" stroke="#FF4F0A" stroke-width="3" />
</svg>
If your svg only uses google webfonts, you can also try vecta's nano optimiser – it can retrieve these fonts and include them as font subsets ( including only needed characters/glyphs).
Is it possible to create a horizontal gradient that applies to the entire group instead of each individual piece? I am trying to build a progress bar composed of multiple rectangles with space in between (see snippet) but it doesn't seem possible unless I create logic for each individual which is not ideal
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100sv%" y2="0%">
<stop offset="50%" stop-color="green" />
<stop offset="50%" stop-color="black" />
</linearGradient>
</defs>
<defs>
<linearGradient id="grad2" x1="0" x2="0" y1="0" y2="1">
<stop offset="50%" stop-color="green"/>
<stop offset="50%" stop-color="black" />
</linearGradient>
</defs>
<g fill="url(#grad1)">
<rect x="10" y="1" width="6" height="15" />
<rect x="20" y="1" width="6" height="15" />
<rect x="30" y="1" width="6" height="15" />
<rect x="40" y="1" width="6" height="15" />
<rect x="50" y="1" width="6" height="15" />
</g>
</svg>
<p>desired look</p>
<div style="display: flex; flex-direction: row">
<div style="width: 6px; height: 15px; margin-right: 5px; background-color: green"></div>
<div style="width: 6px; height: 15px; margin-right: 5px; background-color: green"></div>
<div style="width: 6px; height: 15px; margin-right: 5px; background-color: green"></div>
<div style="width: 6px; height: 15px; margin-right: 5px; background-color: black"></div>
<div style="width: 6px; height: 15px; margin-right: 5px; background-color: black"></div>
</div>
Set attribute gradientUnits="userSpaceOnUse" and use the coordinate of the leftmost side of your grafics for x1 (x1="10") resp. the rightmost for x2 (x2="56").
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3/org/1999/xlink" viewBox="0 0 225 38" preserveAspectRatio="none" width="100%" height="100%">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" id="grad1"
x1="10" y1="0" x2="56" y2="0">
<stop offset="50%" stop-color="green" />
<stop offset="50%" stop-color="black" />
</linearGradient>
</defs>
<g fill="url(#grad1)">
<rect x="10" y="1" width="6" height="15" />
<rect x="20" y="1" width="6" height="15" />
<rect x="30" y="1" width="6" height="15" />
<rect x="40" y="1" width="6" height="15" />
<rect x="50" y="1" width="6" height="15" />
</g>
</svg>
I tried to draw a shape using html/svg. It is a volume control, see below
<svg height="20" width="90" style="background-color: #ccc;">
<g>
<rect x="10" y="0" width="80" height="20" style="stroke: #000; stroke-width: 1; fill: #fff;"></rect>
<!-- Example two of four -->
<polygon points="10,20 50,10 50,20" style="fill: rgba(128,128,128,128)"></polygon>
<line x1="30" y1="0" x2="30" y2="20" style="stroke: #000; stroke-width: 1;"></line>
<line x1="50" y1="0" x2="50" y2="20" style="stroke: #000; stroke-width: 1;"></line>
<line x1="70" y1="0" x2="70" y2="20" style="stroke: #000; stroke-width: 1;"></line>
</g>
</svg>
All browsers draw the horzontal lines double width, except the last one. I even added "stroke-width: 1", but that doesn't work.
I guess anti-aliasing? How can I fix this?
I need to generate multiple parallel connections from an original one, as shown in code:
Code:
<svg width="800" height="800">
<!-- one filter -->
<g transform="translate(50,50)">
<text y="50">Original</text>
<path d="m 0,0L0,100 L100,100 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
</g>
<g transform="translate(250,50)">
<text y="50">Generated</text>
<path d="m 0,0L0,100 L100,100 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
<path d="m 10,0L10,90 L100,90 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
<path d="m 20,0L20,80 L100,80 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
</g>
<g transform="translate(50,250)">
<text y="50">Original</text>
<path d="m 0,0L10,90 L100,70 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
</g>
<g transform="translate(250,250)">
<text y="50">Generated</text>
<path d="m 0,0L10,90 L100,70 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
<path d="m 10,0L20,80 L100,60 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
</g>
</svg>
https://codepen.io/anon/pen/wyObNr
Is there any easy way to do it? Something like cloning and just making it fit along the original one would be perf
regards
Svg provides the means for reuse of partial drawings with the defs element. It may contain groups (g element) that contain an arbitrarily complex scene. These may be referenced thereafter with the use element which effectively produces a clone which can then be subjected to transformations (an arbitrary mix of rotations, scalings, translations).
What follows is a reformulation of your sample scene:
<svg
width="800" height="800"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<defs>
<g id="angle">
<path d="m 0,0L0,100 L100,100 " style="fill: none; stroke-width: 2px; stroke: blueviolet; stroke-linejoin: round; marker-end: url("#sequenceflow-end-white-black-0ctpawyb4xrqoyjc7rrbh92fl");"></path>
</g>
<g id="multi">
<use xlink:href="#angle" />
<use xlink:href="#angle" transform="translate(10,-10)"/>
<use xlink:href="#angle" transform="translate(20,-20)"/>
</g>
</defs>
<!-- base case -->
<g transform="translate(50,50)">
<text x="50" y="50">Original</text>
<use xlink:href="#angle"/>
</g>
<g transform="translate(50,50) translate(200,0)">
<text x="50" y="50">Generated</text>
<use xlink:href="#multi" />
</g>
<!-- rotated -->
<g transform="translate(50,50) translate(0,200)">
<text x="50" y="50">Original</text>
<g transform="rotate(-20)">
<use xlink:href="#angle"/>
</g>
</g>
<g transform="translate(50,50) translate(200,200)">
<text x="75" y="25">Generated</text>
<g transform="rotate(-20)">
<use xlink:href="#multi"/>
</g>
</g>
</svg>
The gradient and marker definitions for my SVG appear to get overwritten when my SVG is inside my webpage. There are no other SVGs on the page.
But when I take the SVG out of the page, it looks just fine.
Here is the SVG in this example.
<svg xmlns="http://www.w3.org/2000/svg" height="500" width="800">
<style>
svg .node.species {
stroke: #FFB800;
stroke-width: 3px;
size: 300px;
}
svg .node.reaction {
stroke: #8089F7;
opacity: 0;
stroke-width: 1.5px;
}
svg .link {
stroke: black;
stroke-width: 3px;
}
svg .link.modifier {
stroke-dasharray: 5, 5;
}
svg .node-label {
font-size: 14px;
font-family: Georgia;
font-weight: bolder;
text-anchor: middle;
dominant-baseline: middle;
}
/* svg .node.selected {
stroke: #FF0000;
}
svg .link.selected {
stroke: #FF0000;
}*/
svg marker {
overflow: visible;
}
svg .null-symbol {
fill: none;
stroke: black;
stroke-width: 3px;
}
</style>
<defs>
<linearGradient id="gradient">
<stop offset="5%" stop-color="#FFDC9E"></stop>
<stop offset="95%" stop-color="#FFF"></stop>
</linearGradient>
<linearGradient id="markerGradient">
<stop offset="5%" stop-color="rgb(97, 116, 255)"></stop>
<stop offset="95%" stop-color="#FFF"></stop>
</linearGradient>
<linearGradient id="reactionGradient">
<stop offset="5%" stop-color="#B0C0FF"></stop>
<stop offset="95%" stop-color="#FFF"></stop>
</linearGradient>
<marker case-sensitive="refX,refY" id="production" viewBox="0 0 10 10" markerWidth="10" markerHeight="10" orient="auto" refx="-2" refy="0" refX="-2" refY="0">
<path fill="url(#markerGradient)" stroke="#0013FF" transform="rotate(-90)" d="M0,2.0808957251439084L2.4028114141347543,-2.0808957251439084 -2.4028114141347543,-2.0808957251439084Z"></path>
</marker>
<marker case-sensitive="refX,refY" id="degradation" viewBox="0 0 10 10" markerWidth="10" markerHeight="10" orient="auto" refx="-2" refy="0" refX="-2" refY="0">
<path fill="url(#markerGradient)" stroke="#0013FF" transform="rotate(-90)" d="M0,2.0808957251439084L2.4028114141347543,-2.0808957251439084 -2.4028114141347543,-2.0808957251439084Z"></path>
</marker>
<marker case-sensitive="refX,refY" id="modifier" viewBox="0 0 10 10" markerWidth="30" markerHeight="30" orient="auto" refx="-0.4" refy="0" refX="-0.4" refY="0">
<path stroke="black" stroke-width="0.3" fill="none" d="M0,0.5641895835477563A0.5641895835477563,0.5641895835477563 0 1,1 0,-0.5641895835477563A0.5641895835477563,0.5641895835477563 0 1,1 0,0.5641895835477563Z"></path>
</marker>
</defs>
<g transform="translate(, )scale(1)">
<g>
<line class="reaction production link" marker-end="url(#production)" x1="449.9996697164325" y1="218.45791860388687" x2="451.42692033038736" y2="246.7481154723436">
</line><line class="reaction production link" marker-end="url(#production)" x1="399.21583821133174" y1="309.0153067725509" x2="345.33989421522693" y2="338.2824980727582">
</line>
</g>
<g>
<line class="reaction reactant link" x1="446.9075572254284" y1="157.1677217354301" x2="449.9996697164325" y2="218.45791860388687">
</line><line class="reaction reactant link" x1="453.0917822074366" y1="279.7481154723436" x2="399.21583821133174" y2="309.0153067725509">
</line>
</g>
<g>
</g>
<g draggable="" transform="translate(446.9075572254284,157.1677217354301)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<rect class="species node" fill="url(#gradient)" x="-50" y="-15" width="100" height="30" ry="15">
<title>ID: S1, Name: S1</title>
</rect>
<text class="node-label">S1</text>
</g><g draggable="" transform="translate(453.0917822074366,279.7481154723436)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<rect class="species node" fill="url(#gradient)" x="-50" y="-15" width="100" height="30" ry="15">
<title>ID: S2, Name: S2</title>
</rect>
<text class="node-label">S2</text>
</g><g draggable="" transform="translate(345.33989421522693,338.2824980727582)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<rect class="species node" fill="url(#gradient)" x="-50" y="-15" width="100" height="30" ry="15">
<title>ID: S3, Name: S3</title>
</rect>
<text class="node-label">S3</text>
</g>
<g draggable="" transform="translate(473.4770117242872,216.74146493626216)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<circle class="node reaction" fill="url(#reactionGradient)" r="5">
<title>ID: reaction1, Name: reaction1</title>
</circle>
<text class="node-label"></text>
</g><g draggable="" transform="translate(409.9633485910613,329.9478703486097)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<circle class="node reaction" fill="url(#reactionGradient)" r="5">
<title>ID: reaction2, Name: reaction2</title>
</circle>
<text class="node-label"></text>
</g>
</g>
</svg>
EDIT 1
Here is the style of the linearGradient element
EDIT 2
Style of the defs element
EDIT 3
I found that when I remove the head tag, and then reapply it, the SVG is then correctly rendered. Weird.
Turns out I had <base href="/"> in head which was messing things up.