I have drawn two path lines using SVG and I've saved these elements into two variables in my javascript code: 'Line1', and 'Line2', and I need to merge the two lines into one single path element. Is there a way to do so?
Are your paths defined relatively (small letters) or absolutely (capitals)? If absolute, joining two paths is trivial, just append the values of the d attribute. If you have two paths like this:
<path id="Line1" d="M50,50
A30,30 0 0,1 35,20
L100,100"
style="stroke:#660000; fill:none;"/>
<path id="Line2" d="M110,110
L100,0"
style="stroke:#660000; fill:none;"/>
Then this JavaScript code:
var Line1 = document.getElementById("Line1");
var Line2 = document.getElementById("Line2");
//Add paths together
Line1.setAttribute('d', Line1.getAttribute('d') + ' ' + Line2.getAttribute('d'));
//Remove unnecessary second path
Line2.parentNode.removeChild(Line2);
Will lead to you having a single path like this:
<path id="Line1" d="M50,50
A30,30 0 0,1 35,20
L100,100 M110,110
L100,0"
style="stroke:#660000; fill:none;"/>
Here's a jsFiddle, it works in Firefox 4 (needs an HTML5 parser so you can have inline SVG).
If your paths are relative then you're going to have to add something between the appended paths so that the second one starts in the correct place.
Concatenate d attributes
Usually, you can just concatenate the pathdata d attribute of several <path> elements to get a combined path.
Unfortunately, you might encounter some »bad practices« using M or m as interchangeable commands.
Common misconceptions about M or m:
M (moveto) can be absolute or relative.
Unlike the z (closepath) command (lowercase/uppercase – doesn't matter).
Relative m commands can be used used for compound paths like e.g the inner "hole" of the letter "o" referring to the previous command's end coordinate.
In fact, every first m or M command uses absolute coordinates – since there are no preceding points.
However, the first M command can be uppercase or lowercase – doesn't matter
(blame the specs)
Exception: the lowercase m command introduces a row of implicit relative l lineto commands. (But you can/should also avoid this)
Example 1: paths starting with (unnecessary) relative m command
svg{
border:1px solid #ccc;
width:25%;
}
path{
fill:#555;
}
<p>Seperate paths</p>
<svg viewBox="0 0 50 10">
<path id="path1" d="m 20 0 l 10 0 l 0 10 l -10 0z" />
<path id="path2" d="m 40 0 l 10 0 l 0 10 l -10 0z" />
<path id="path3" d="m 0 0 l 10 0 l 0 10 l -10 0z" />
</svg>
<p>Merged paths</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
m 20 0 l 10 0 l 0 10 l -10 0z
m 40 0 l 10 0 l 0 10 l -10 0z
m 0 0 l 10 0 l 0 10 l -10 0z
" />
</svg>
<p>Merged paths - fixed</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
M 20 0 l 10 0 l 0 10 l -10 0z
M 40 0 l 10 0 l 0 10 l -10 0z
M 0 0 l 10 0 l 0 10 l -10 0z
" />
</svg>
Fix: just replace each starting m with an absolute M
Example 2: m command for adjacent linetos
The exception are m commands followed by coordinates – used as a shorthand for succeeding l (relative linetos). (See also w3c specs.)
svg{
border:1px solid #ccc;
width:25%;
}
path{
fill:#555;
}
<p>Seperate paths</p>
<svg viewBox="0 0 50 10">
<path id="path1" d="m 20 0 10 0 0 10 -10 0z" />
<path id="path2" d="m 40 0 10 0 0 10 -10 0z" />
<path id="path3" d="m 0 0 10 0 0 10 -10 0z" />
</svg>
<p>Merged paths</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
m 20 0 10 0 0 10 -10 0z
m 40 0 10 0 0 10 -10 0z
m 0 0 10 0 0 10 -10 0z
" />
</svg>
<p>Merged paths - fixed</p>
<svg viewBox="0 0 50 10">
<path id="pathConcat"
d="
m 20 0 10 0 0 10 -10 0z
M 40 0 l 10 0 0 10 -10 0z
M 0 0 l 10 0 0 10 -10 0z
" />
</svg>
Fix: insert l commands
<path d="m 20 0 10 0 0 10 -10 0z" />
equals
<path d="M 20 0 l 10 0 l 0 10 l -10 0z" />
or
<path d="M 20 0 l 10 0 0 10 -10 0z" />
Example 3: fix pseudo relative m commands via getPathData()
Currently still a draft and not natively supported by major browser.
However you can use Jarek Foksa's polyfill..
getPathData() will return an array of command objects and normalize
repeated commands like this:
[
{type: 'm', values:[20, 0] },
{type: 'l', values:[10, 0]},
{type: 'l', values:[0, 10]},
{type: 'l', values:[-10, 0]}
]
function concatSimple(){
let d1= path1.getAttribute('d')
let d2= path2.getAttribute('d')
let d3= path3.getAttribute('d')
pathConcat.setAttribute('d', d1+d2)
}
function concatPathData(){
let pathData1= fixFirstM(path1.getPathData());
let pathData2= fixFirstM(path2.getPathData());
let pathData3= fixFirstM(path3.getPathData());
let pathDataConcat = pathData1.concat(pathData2).concat(pathData3);
pathConcat.setPathData(pathDataConcat);
}
// change first m to absolute M
function fixFirstM(pathData){
pathData[0].type='M';
return pathData;
}
svg{
border:1px solid #ccc;
width:25%;
}
path{
fill:#555;
}
<p><button onclick="concatSimple()">concat d simple</button>
<button onclick="concatPathData()">concat d pathData</button>
</p>
<svg viewBox="0 0 50 10">
<path id="path1" d="m 20 0 10 0 0 10 -10 0z" />
<path id="path2" d="m 40 0 10 0 0 10 -10 0z" />
<path id="path3" d="m 0 0 10 0 0 10 -10 0z" />
</svg>
<svg viewBox="0 0 50 10">
<path id="pathConcat" d="" />
</svg>
<script src="https://cdn.jsdelivr.net/npm/path-data-polyfill#1.0.4/path-data-polyfill.min.js"></script>
To fix the first relative m we can convert by changing the first command type
pathData[0].type='M';
Recommendation: only use relative m commands if they are actually relative:
if you need a shorthand for following l commands (like m 20 0 10 0 0 10 -10 0z)
for relative (subpath) starting points in compound paths – like the letter "o"
Actually merging shapes: removing overlapping shapes
If you need to merge shapes - paper.js has some powerful path operations like unite, subtract etc.
Explained here: "Merging two bezier-based shapes into one to create a new outline"
Related
Using the answer from this thread I was able to draw a semicircle (arc):
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle) {
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
].join(" ");
console.log(d)
return d;
}
window.onload = function() {
document.getElementById("arc1").setAttribute("d", describeArc(100, 100, 50, -90, 90));
};
<svg width="1000" height="1000">
<path id="arc1" fill="red" stroke="#446688" stroke-width="2" />
</svg>
What I'm trying to achieve is to be able to draw an SVG as a path consistent with many arcs (semicircles) and be able to set fill on them.
Something like this:
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 50 100 A 10 10 0 0 1 100 100 M 100 100 A 10 10 0 0 1 150 100 M 150 100 A 10 10 0 0 1 200 100 M 200 100 A 10 10 0 0 1 250 100" fill="red" stroke="blue" stroke-width="3" />
</svg>
Is there a better way to achieve a simpler path? For now, it looks like this:
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 50 100 A 10 10 0 0 1 100 100 M 100 100 A 10 10 0 0 1 150 100 M 150 100 A 10 10 0 0 1 200 100 M 200 100 A 10 10 0 0 1 250 100" fill="red" stroke="blue" stroke-width="3" />
</svg>
Or do I have to generate a longer and longer path when there are, let's say, 30 semicircles?
Edit: the IE9+ support is required. Also, those elements will be clickable, draggable and controllable. By controllable I mean that their number and size will change when mouse clicking/moving.
I choose my first approach with a dynamic very long path.
Thanks!
For this I would use lower case commands. For example this is drawing the arc you need: an arc with a radius of 25 and an ending point 50 units ( 2 * 25 ) away from the starting point of the arc.
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 50 100 a 25 25 0 0 1 50 0" fill="red" stroke="blue" stroke-width="3" />
</svg>
In order to get a path of 4 arcs you need to repeat the arc (a 25 25 0 0 1 50 0) 4 times something like this:
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 50 100 a 25 25 0 0 1 50 0
a 25 25 0 0 1 50 0
a 25 25 0 0 1 50 0
a 25 25 0 0 1 50 0 " fill="red" stroke="blue" stroke-width="3" />
</svg>
It's easy to see how you can use javascript to generate the d attribute you need:
let d ="M 50 100";
for(let i=0; i<4;i++){d +="a 25 25 0 0 1 50 0 "}
document.querySelector("path").setAttribute("d",d);
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 50 100" fill="red" stroke="blue" stroke-width="3" />
</svg>
You can use a vanilla JavaScript Web Component (supported in all modern Browsers) to create the SVG
Your Custom Element <svg-arcs repeat="7"></svg-arcs> then creates:
<style>
svg { background: pink }
svg path { stroke-width: 3 }
</style>
<svg-arcs repeat="30"></svg-arcs>
<script>
customElements.define("svg-arcs", class extends HTMLElement {
connectedCallback() {
let repeat = this.getAttribute("repeat") || 5;
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
for (let x = 0; x < repeat; x++) {
let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", `M${3 + 50*x} 100 A 10 10 0 0 1 ${50+50*x} 100`);
path.setAttribute("fill", "red");
path.setAttribute("stroke", "blue");
svg.append(path);
}
svg.setAttribute("viewBox", `0 0 ${50*repeat + 3} 150`);
this.append(svg);
}
})
</script>
For more dynamic control over individual arcs see the Web Component in SO post:
Firefox: shadow-DOM compatibility
You could use a pattern and size your patterned object appropriately. Here is one that accomodates 4 iterations.
Edit & Update:
If you want those arcs to be independently clickable/draggable, then they need to be separately addressable in the DOM. The "use" element might be what you're looking for.
svg {
background: grey;
}
<svg width="800px" height="600px">
<defs>
<path id="arc-template" d="M1.5 50 a 10 10 0 0 1 97 0" fill="red" stroke="blue" stroke-width="3" />
</defs>
<use id="arc1" href="#arc-template" x="50" y="100"/>
<use id="arc2" href="#arc-template" x="150" y="100"/>
<use id="arc3" href="#arc-template" x="250" y="100"/>
<use id="arc4" href="#arc-template" x="350" y="100"/>
</svg>
I have a SVG image of a person which I want to animate slightly. I want to make the arm point towards the mouse. However I can't seem to get it to work. Currently I have this:
View on Codepen
As you can see the hand is fixed but the shoulder is loose which should be the opposite. Only when I point my mouse towards the shoulder the hand is correct again.
I use the following code
document.querySelector('#app')
.addEventListener('mousemove', mascotArm);
function mascotArm() {
var arm = document.querySelectorAll('.arm');
arm.forEach(function(arm) {
let x = (arm.getBoundingClientRect().right);
let y = (arm.getBoundingClientRect().top);
let radian = Math.atan2(event.pageX - x, event.pageY + y);
let rot = (radian * (90 / Math.PI))
arm.style.transform = 'rotate('+ rot + 'deg)';
})
}
I've tried the following code, but I wasn't able to implement it correctly in the SVG image
var cv = document.createElement('canvas');
var ctx = cv.getContext('2d');
cv.width = 1224;
cv.height = 768;
document.body.appendChild(cv);
var centerX = 300, centerY = 200;
var arm = new Image();
arm.onload = function() {
drawArrow(0);
};
var arm = document.querySelectorAll('.arm')
function drawArm(angle) {
ctx.clearRect(0, 0, cv.width, cv.height);
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(-Math.PI / 2);
ctx.rotate(angle);
ctx.drawImage(arm, -arm.width / 2, -arm.height / 2);
ctx.restore();
}
document.onmousemove = function(e) {
var dx = e.pageX - centerX;
var dy = e.pageY - centerY;
var theta = Math.atan2(dy, dx);
drawArm(theta);
};
Desired solution
My desired solution would be that I can move my mouse on the page and that the arm is pointing towards my mouse. If possible it would be awesome if it can only move 90 degrees so that it doesn't make weird rotations.
Many thanks!
You will need a transform origin for the rotation of the .arm. For example you may try .arm{transform-origin: 280px 200px;}. In the code I've added a small red circle to mark the rotation hub. You can delete the circle and change the position of the hub. Please observe that I'm using the hub position in JavaScript. You will have to change it there too.
In JavaScript it's Math.atan2(y,x) not Math.atan2(x,y). Please read about Math.atan2.
Also the arm has a different angle inside the .arm box. You will need to to take in consideration this angle too. In order to understand what happens I've added a black rectangle as big as the bounding box of the arm. You may try arm.style.transform = 'rotate('+ (rot - 20) + 'deg)';
Also you ar listening the mouse over the app. As you can see I'm listening the mouse over the svg elemet. I suppose you need the doctorat the right side of the app. In order to keep it there I have #app {height:100vh; The app is now as wide as it's parent. Also svg{width:100%; height:100%} This will stretch the svg element over the app. In order to keep the doctor to the right I'm using preserveAspectRatio="xMaxYMax meet"
let svg = document.querySelector('#svg'); svg.addEventListener('mousemove', mascotArm);
//the hub position
let X = 280;
let Y = 200;
function mascotArm(event) {
var arm = document.querySelector('.arm');
let p = getMousePositionSVG(event)
let x = p.x;
let y = p.y;
let radian = Math.atan2(Y-y, X-x);
let rot = (radian * (180 / Math.PI))
arm.style.transform = 'rotate('+ (rot - 20) + 'deg)';
}
//a function to calculate the mouse position over an svg element
function getMousePositionSVG(event) {
var point = svg.createSVGPoint();
point.x = event.clientX;
point.y = event.clientY;
point = point.matrixTransform(svg.getScreenCTM().inverse());
return point;
}
#app {
background: #efefef;
height:100vh
}
svg{width:100%; height:100%}
.arm{transform-origin: 280px 200px;}
<div id="app">
<svg viewBox="0 0 458 753" fill="none" id="svg" preserveAspectRatio="xMaxYMax meet">
<g class="Layer 1">
<g class="Group">
<g class="Group_2">
<g class="Group_3">
<path d="M286.306 353l-18.063 197.3-14.569 144.54s7.896 11 37.606 6l15.695-151.5 19.149-124.5h15.299l10.167 276s12.831 10 36.619 1l-4.737-355.3-97.166 6.46z" fill="#303942" class="Vector_7"/>
<path d="M373.265 701.34a48.73 48.73 0 0014.609-2.5l-4.639-347.6-89.033 5.9-17.767 193.7-14.312 142.4c2.171 1.6 7.6 4.7 18.853 4.7a73.728 73.728 0 0010.462-.8l15.3-148.3 19.741-128.2h22.998l10.266 277.8a29.95 29.95 0 0013.522 2.9z" fill="#252D33" class="Vector_8"/>
<path d="M274.856 199.44s3.257 100.3 9.673 151.2c0 0 24.479 11.1 63.566 9.5 27.638-1.1 35.534-7.1 35.534-7.1l40.075-162.7s-20.432-11.9-62.481-11.9l-19.543 18.3s-5.331-14.2-15.793-17c-15.793 1.1-32.277 6-50.834 9.1l-.197 10.6z" fill="#148C78" class="Vector_9"/>
<path d="M341.778 196.64l5.034-17.8 11.154 5.2-16.188 12.6z" fill="#056351" class="Vector_10"/>
<path d="M349.477 161.24c4.936-2.4 9.476-6.9 12.931-13l.493 2.6.296 25.5c-8.982 1.2-19.247-4.1-28.526-14.6a17.467 17.467 0 007.458 1.399 17.467 17.467 0 007.348-1.899z" fill="#F2957C" class="Vector_11"/>
<path d="M340.298 180.44l1.48 16.2-9.179-11.5 7.699-4.7z" fill="#056351" class="Vector_12"/>
<path d="M350.168 185.14a41.914 41.914 0 01-13.226.5l-6.219 7.5 5.429 7.9-21.222 125.3 16.385 16.6 20.038-14.5-4.639-126.6 6.81-9.8-3.356-6.9z" fill="#73C8D2" class="Vector_13"/>
<path d="M315.029 179.34l13.72 18.8 11.549-17.7-18.162-12.3-7.107 11.2z" fill="#0C7561" class="Vector_14"/>
<path d="M412.353 247.44l-19.445 75 6.712 198.2-66.33 14.6-9.674-19.7-9.673 20.9-54.683-13.8s13.424-289.4 15.892-333.6l28.032-9.1 34.547 115.5 41.299-118.2s43.43 11.8 53.794 14.4" fill="#E5E5E5" class="Vector_16"/>
<path d="M335.165 164.64c17.964-2.3 38.199-17.3 42.838-27a17.044 17.044 0 012.863-4.6c16.385 3 24.38-31.4 13.621-36.1-.395-.2-.888-.3-1.283-.5a10.522 10.522 0 017.6.5c10.759 4.7 2.863 39.1-13.621 36.1a15.652 15.652 0 00-2.863 4.6c-4.639 9.8-24.873 24.7-42.838 27a33.045 33.045 0 01-7.699.1c.463.016.926-.017 1.382-.1z" fill="#F4876C" class="Vector_17"/>
<path d="M399.225 102.84c-5.626-2.9-10.562 6.3-10.858 16.1 4.639-.7 5.429 4.7 2.764 8.6 9.278 1.9 14.115-21.6 8.094-24.7z" fill="#F2957C" class="Vector_18"/>
<path d="M432.884 191.64c-8.094-2.1-40.174-13.5-53.795-14.4l-41.259 118.1-34.547-115.5-17.471 44c-2.171 40.1-18.359 258.6-20.235 295l46.491 12.4 11.154-23.6 11.943 22.3 61.888-15.3 4.442-196.4 14.411-98.3" fill="#F2F2F2" class="Vector_19"/>
<g class="Group_6">
<path d="M375.733 274.74v-8.2h-6.811a2.956 2.956 0 01-1.923-1.186 3.028 3.028 0 01-.544-2.214 2.887 2.887 0 01.808-1.681 2.824 2.824 0 011.659-.819h19.544a2.935 2.935 0 012.018.674c.567.47.942 1.136 1.053 1.87a3.035 3.035 0 01-.455 2.103 2.964 2.964 0 01-1.728 1.253h-7.6v8.2a3.118 3.118 0 01-1.064 1.796 3.04 3.04 0 01-3.893 0 3.118 3.118 0 01-1.064-1.796zm-6.811-12.8a1.664 1.664 0 00-1.215.427c-.333.3-.535.722-.561 1.173-.027.451.125.894.421 1.231.296.338.713.542 1.158.569h8.39v9.4c.038.446.243.861.573 1.159.331.298.762.455 1.204.441a1.774 1.774 0 001.066-.519c.287-.291.468-.672.513-1.081v-9.4h8.094c.445.027.882-.127 1.215-.427.333-.3.535-.722.561-1.173a1.711 1.711 0 00-.421-1.231 1.674 1.674 0 00-1.158-.569h-19.84z" fill="#006983" class="Vector_20"/>
<path d="M368.922 260.64h19.544a2.935 2.935 0 012.018.674c.567.47.942 1.136 1.053 1.87a3.035 3.035 0 01-.455 2.103 2.964 2.964 0 01-1.728 1.253h-7.6v8.2a3.007 3.007 0 01-1.171 1.949 2.931 2.931 0 01-2.185.551 2.943 2.943 0 01-1.636-.843 3.015 3.015 0 01-.832-1.657v-8.2h-6.771a2.954 2.954 0 01-1.924-1.186 3.028 3.028 0 01-.543-2.214 2.433 2.433 0 01.629-1.721 2.375 2.375 0 011.641-.779h-.04zm.04-1.2c-1.1 0-2.154.443-2.932 1.23a4.23 4.23 0 00-1.214 2.97 4.23 4.23 0 001.214 2.97 4.118 4.118 0 002.932 1.23h5.626v6.9a4.254 4.254 0 001.361 2.904 4.147 4.147 0 002.982 1.096 4.073 4.073 0 002.751-1.213 4.174 4.174 0 001.197-2.787v-6.9h5.626c1.1 0 2.154-.442 2.932-1.23a4.23 4.23 0 001.214-2.97 4.23 4.23 0 00-1.214-2.97 4.123 4.123 0 00-2.932-1.23h-19.543z" fill="#fff" class="Vector_21"/>
<path d="M368.922 259.44h19.544c1.1 0 2.154.443 2.931 1.23a4.227 4.227 0 011.215 2.97 4.227 4.227 0 01-1.215 2.97 4.114 4.114 0 01-2.931 1.23h-5.626v6.9a4.254 4.254 0 01-1.361 2.904 4.147 4.147 0 01-2.982 1.096 4.069 4.069 0 01-2.751-1.213 4.17 4.17 0 01-1.197-2.787v-6.9h-5.627a4.15 4.15 0 01-2.923-1.239 4.258 4.258 0 01-1.222-2.961 4.187 4.187 0 011.202-2.982 4.095 4.095 0 012.943-1.218zm0-1.3a5.35 5.35 0 00-2.08.413 5.41 5.41 0 00-1.764 1.192 5.485 5.485 0 00-1.177 1.787 5.554 5.554 0 00-.407 2.108 5.475 5.475 0 00.391 2.117 5.424 5.424 0 001.175 1.796 5.334 5.334 0 001.772 1.19 5.28 5.28 0 002.09.397h4.343v5.7a5.492 5.492 0 001.686 3.646 5.354 5.354 0 003.694 1.484 5.354 5.354 0 003.694-1.484 5.496 5.496 0 001.685-3.646v-5.7h4.343a5.351 5.351 0 002.081-.413 5.42 5.42 0 001.764-1.192 5.482 5.482 0 001.176-1.787 5.536 5.536 0 00.408-2.108 5.475 5.475 0 00-.391-2.117 5.424 5.424 0 00-1.175-1.796 5.328 5.328 0 00-3.863-1.587h-19.445z" fill="#006983" class="Vector_22"/>
<path d="M378.595 249.44c.391 0 .773.117 1.097.337a2.019 2.019 0 01.299 3.077 1.956 1.956 0 01-3.037-.303 2.017 2.017 0 01.246-2.525 1.96 1.96 0 011.395-.586zm0-1.2c-.644 0-1.273.194-1.809.556a3.295 3.295 0 00-1.2 1.481 3.343 3.343 0 00-.185 1.907c.125.64.436 1.228.891 1.689a3.219 3.219 0 003.55.716 3.27 3.27 0 001.462-1.216c.358-.542.549-1.18.549-1.833a3.32 3.32 0 00-.24-1.268 3.268 3.268 0 00-.705-1.074 3.216 3.216 0 00-2.313-.958z" fill="#006983" class="Vector_23"/>
<path d="M378.595 248.24c.645 0 1.274.194 1.81.556.536.363.953.878 1.2 1.481.246.603.311 1.267.185 1.907a3.316 3.316 0 01-.891 1.689 3.219 3.219 0 01-3.55.716 3.27 3.27 0 01-1.462-1.216 3.327 3.327 0 01-.549-1.833 3.423 3.423 0 01.982-2.306 3.334 3.334 0 012.275-.994zm0-1.3c-.878 0-1.737.264-2.467.758a4.489 4.489 0 00-1.636 2.02 4.56 4.56 0 00-.253 2.6 4.508 4.508 0 001.216 2.304 4.389 4.389 0 004.84.975 4.45 4.45 0 001.994-1.657c.488-.74.748-1.61.748-2.5a4.585 4.585 0 00-1.315-3.168 4.461 4.461 0 00-3.127-1.332z" fill="#fff" class="Vector_24"/>
<path d="M378.595 246.94c.879 0 1.738.264 2.468.758a4.489 4.489 0 011.636 2.02 4.56 4.56 0 01.253 2.6 4.523 4.523 0 01-1.216 2.304 4.389 4.389 0 01-4.84.975 4.45 4.45 0 01-1.994-1.657 4.542 4.542 0 01-.748-2.5 4.636 4.636 0 011.331-3.151 4.522 4.522 0 013.11-1.349zm0-1.2c-1.132 0-2.239.34-3.18.977a5.794 5.794 0 00-2.109 2.603 5.875 5.875 0 00-.325 3.352 5.818 5.818 0 001.566 2.969 5.66 5.66 0 006.239 1.257 5.742 5.742 0 002.57-2.136 5.854 5.854 0 00.964-3.222 5.84 5.84 0 00-1.676-4.101 5.688 5.688 0 00-4.049-1.699z" fill="#006983" class="Vector_25"/>
</g>
<path d="M303.184 179.84l34.547 115.5-30.302-37.4 2.369-24.6-16.089-4.9 1.579-47.3 7.896-1.3z" fill="#E5E5E5" class="Vector_26"/>
<path d="M303.382 180.14l-4.343.7-1.086 43.8 15.892 5-2.567 25.4 22.999 28.4-30.895-103.3z" fill="#EAEAEA" class="Vector_27"/>
<path d="M333.092 318.34c2.508 0 4.541-2.059 4.541-4.6 0-2.541-2.033-4.6-4.541-4.6-2.507 0-4.54 2.059-4.54 4.6 0 2.541 2.033 4.6 4.54 4.6z" fill="#E8E8E8" class="Vector_28"/>
<path d="M331.019 349.04c2.508 0 4.541-2.06 4.541-4.6 0-2.541-2.033-4.6-4.541-4.6-2.507 0-4.54 2.059-4.54 4.6 0 2.54 2.033 4.6 4.54 4.6z" fill="#E8E8E8" class="Vector_29"/>
<path d="M329.637 381.04c2.508 0 4.541-2.06 4.541-4.6 0-2.541-2.033-4.6-4.541-4.6-2.507 0-4.54 2.059-4.54 4.6 0 2.54 2.033 4.6 4.54 4.6z" fill="#E8E8E8" class="Vector_30"/>
<path d="M327.565 411.74c2.507 0 4.54-2.06 4.54-4.6 0-2.541-2.033-4.6-4.54-4.6-2.508 0-4.541 2.059-4.541 4.6 0 2.54 2.033 4.6 4.541 4.6z" fill="#E8E8E8" class="Vector_31"/>
<path d="M326.676 439.34c2.508 0 4.541-2.059 4.541-4.6 0-2.541-2.033-4.6-4.541-4.6-2.507 0-4.54 2.059-4.54 4.6 0 2.541 2.033 4.6 4.54 4.6z" fill="#E8E8E8" class="Vector_32"/>
<path d="M324.505 470.04c2.507 0 4.54-2.06 4.54-4.6 0-2.541-2.033-4.6-4.54-4.6-2.508 0-4.541 2.059-4.541 4.6 0 2.54 2.033 4.6 4.541 4.6z" fill="#E8E8E8" class="Vector_33"/>
<path d="M323.222 498.24c2.507 0 4.54-2.06 4.54-4.6 0-2.541-2.033-4.6-4.54-4.6-2.508 0-4.541 2.059-4.541 4.6 0 2.54 2.033 4.6 4.541 4.6z" fill="#E8E8E8" class="Vector_34"/>
<path d="M352.142 88.24c2.567-2.3 8.686-1.8 10.364.6.889.6 0 1.8-1.776 1.8h-3.415a3.91 3.91 0 00-2.567.6c-1.717-.1-4.343-1.9-2.606-3z" fill="#65433F" class="Vector_35"/>
<path d="M332.895 120c.789 0 2.27 1.6 3.06 1.6 1.48 0 2.27 0 3.059-.8.79-.8 2.271 0 1.58 1.6-.691 1.6-3.06 2.5-4.639 2.5-1.58 0-4.64-1.6-5.33-3.3.789-.76 1.48-1.6 2.27-1.6z" fill="#F4876C" class="Vector_36"/>
<path d="M332.796 153.74l1.086-1.1c1.086 0 2.171 2.3 1.086 2.3h-2.172c0-.1-1.086-.1 0-1.2z" fill="#F4876C" class="Vector_37"/>
<path d="M396.955 104.84a4.065 4.065 0 00-1.913-.537 4.062 4.062 0 00-1.937.437c1.777-2 3.948-2.8 6.219-1.6 5.231 2.7 2.171 21-4.738 24.3 5.172-5.7 6.909-20.2 2.369-22.6z" fill="#E58370" class="Vector_38"/>
<path d="M322.037 88.34c-2.566-2.4-8.686-1.8-10.364.6-.888.6 0 1.8 1.777 1.8h3.454a3.91 3.91 0 012.567.6c1.776-.1 4.343-1.9 2.566-3z" fill="#65433F" class="Vector_39"/>
<path d="M378.99 177.24l6.811.3 3.948 42.4-19.642 4.4 6.712 26.4-37.212 39.3 39.383-112.8z" fill="#E5E5E5" class="Vector_40"/>
<path d="M373.167 247.94l-6.91-27.4 19.939-4.5-3.554-38.6-3.454-.2-35.534 101.9 29.513-31.2z" fill="#EAEAEA" class="Vector_41"/>
<path d="M296.176 190.54h-.395a19.546 19.546 0 00-13.621 5.5c-10.463 10.1-9.377 30.6-9.278 31.5.093.656.432 1.251.947 1.66.514.41 1.165.603 1.816.54a2.41 2.41 0 001.754-.723 2.49 2.49 0 00.714-1.777c0-.3-1.086-19.4 7.897-28a13.675 13.675 0 014.593-2.975 13.54 13.54 0 015.376-.925h.197a13.562 13.562 0 018.291 3.1c4.146 3.3 9.18 10.9 9.575 27.9a2.61 2.61 0 00.921 1.718c.516.43 1.177.638 1.843.582a2.36 2.36 0 001.798-.635 2.423 2.423 0 00.768-1.765c-.395-15.1-4.244-25.7-11.549-31.4a18.149 18.149 0 00-11.647-4.3z" fill="#006983" class="Vector_67"/>
<g class="Group_13">
<path d="M293.807 255.34a2.381 2.381 0 00-.714-1.647 2.311 2.311 0 00-1.655-.653l-4.245.5c-1.283.4-1.283 1.1-1.283 2 0 1 0 1.7 1.481 2l4.145.2a2.36 2.36 0 001.609-.74c.423-.447.66-1.041.662-1.66z" fill="#151E31" class="Vector_68"/>
<path d="M290.55 255.44a2.712 2.712 0 012.27 1c-.418.429-.984.68-1.579.7l-2.566-.1c-.099-1.2.592-1.6 1.875-1.6z" fill="#fff" class="Vector_69"/>
<path d="M289.563 254.24c-1.875.3-2.566 1.6-2.566 3.3-1.185-.3-1.185-1-1.185-1.9 0-.9 0-1.6 1.283-2l4.245-.5c.522 0 1.03.177 1.441.504.411.326.703.782.829 1.296a4.596 4.596 0 00-4.047-.7z" fill="#808184" class="Vector_70"/>
</g>
<g class="Group_14">
<path d="M298.841 255.24a2.375 2.375 0 01.645-1.677 2.32 2.32 0 011.626-.723l4.343.3c1.381.3 1.283 1 1.381 1.9 0 1 0 1.7-1.381 2.1l-4.146.4a2.458 2.458 0 01-1.676-.663 2.523 2.523 0 01-.792-1.637z" fill="#151E31" class="Vector_71"/>
<path d="M302.099 255.14a2.272 2.272 0 00-2.172 1.1c.429.401.996.616 1.579.6l2.567-.3c0-1.2-.691-1.54-1.974-1.4z" fill="#fff" class="Vector_72"/>
<path d="M303.027 253.84c.379.016.751.11 1.094.277a2.8 2.8 0 01.897.692 2.851 2.851 0 01.674 2.131c1.184-.4 1.184-1.1 1.086-2-.099-.9 0-1.6-1.382-1.9l-4.343-.3a2.218 2.218 0 00-1.428.549c-.397.348-.66.826-.744 1.351a5.713 5.713 0 014.146-.8z" fill="#808184" class="Vector_73"/>
</g>
</g>
</g>
<g class="ster-ogen">
<path d="M318.43 112.35l8.72 3.42-3.63-8.61 6-7.27-9.34.73-5-7.89-2.18 9-9 2.28 8 4.88-.62 9.34 7.05-5.88z" fill="#F9FF00" class="Vector_74"/>
<path d="M361.98 119.3l-.62-10 8.51-5.19-9.65-2.49-2.24-9.62-5.3 8.31-9.86-.83 6.33 7.68-3.84 9.13 9.24-3.63 7.43 6.64z" fill="#F9FF00" class="Vector_75"/>
</g>
<g class="blij">
<path d="M334.671 148.64c-11.055-1.1-12.733-9-11.055-11.2 1.678-2.2 19.939-2.3 22.209 0 1.619 1.7-.592 11.2-11.154 11.2z" fill="#AA312D" class="Vector_76"/>
<path d="M346.319 139.14a1.93 1.93 0 00-.592-1.7c-2.271-2.3-19.939-2.3-22.209 0 0 0-.593 1.1 0 1.7 7.304 2.2 15.102 1.7 22.801 0z" fill="#fff" class="Vector_77"/>
<path d="M330.723 147.84a12.667 12.667 0 01-4.836-2.6c.493-.5 1.085-.5 1.579-1.1a17.076 17.076 0 015.527-.6 13.086 13.086 0 018.588 3.2 12.866 12.866 0 01-6.91 1.9 13.294 13.294 0 01-3.454-.7.884.884 0 01-.494-.1z" fill="#902622" class="Vector_78"/>
</g>
<g class="ogen">
<path d="M358.065 113.64c4.143 0 7.501-3.627 7.501-8.1 0-4.474-3.358-8.1-7.501-8.1-4.143 0-7.502 3.626-7.502 8.1 0 4.473 3.359 8.1 7.502 8.1z" fill="#F2957C" class="Vector_79"/>
<path d="M358.065 112.44c3.543 0 6.416-3.089 6.416-6.9 0-3.811-2.873-6.9-6.416-6.9-3.544 0-6.416 3.089-6.416 6.9 0 3.811 2.872 6.9 6.416 6.9z" fill="#5E3536" class="Vector_80"/>
<path d="M360.039 104.14c.872 0 1.579-.761 1.579-1.7s-.707-1.7-1.579-1.7-1.579.761-1.579 1.7.707 1.7 1.579 1.7z" fill="#fff" class="Vector_81"/>
<path d="M316.707 113.64c4.143 0 7.502-3.627 7.502-8.1 0-4.474-3.359-8.1-7.502-8.1s-7.502 3.626-7.502 8.1c0 4.473 3.359 8.1 7.502 8.1z" fill="#F2957C" class="Vector_82"/>
<path d="M316.707 112.44c3.543 0 6.416-3.089 6.416-6.9 0-3.811-2.873-6.9-6.416-6.9s-6.416 3.089-6.416 6.9c0 3.811 2.873 6.9 6.416 6.9z" fill="#5E3536" class="Vector_83"/>
<path d="M318.681 104.14c.872 0 1.579-.761 1.579-1.7s-.707-1.7-1.579-1.7-1.579.761-1.579 1.7.707 1.7 1.579 1.7z" fill="#fff" class="Vector_84"/>
</g>
<g class="arm" id="kk">
<rect y="109" width="282" height="128" fill="black"/>
<path d="M75.77 140.4l-8.785-3.8s-8.983-13.4-21.222-17.2a79.917 79.917 0 01-8.193-2.9 16.65 16.65 0 01-6.81-7.5s-5.627.5-1.481 7.8a22.565 22.565 0 006.613 6.4 67.371 67.371 0 01-10.759-3.4c-1.776-.8-12.437-5-16.385-6.9-1.875-.9-6.712-3.3-8.489.4-1.974 4.2 7.897 7.6 10.068 8.4 4.738 1.9 16.78 8.8 16.78 8.8s-8.093-2.6-9.475 2.2a4.26 4.26 0 00.296 3.1c1.184 2.4 2.862 2.5 2.862 2.5a4.809 4.809 0 00-1.579 2.521 4.86 4.86 0 00.197 2.979 5.87 5.87 0 001.962 2.366 5.76 5.76 0 002.875 1.034s-4.442 5.6 3.948 9c2.863 1.2 4.935 1.3 7.897 1.8 2.888.601 5.843.802 8.784.6a48.873 48.873 0 009.377-.9c1.876-.4 7.009 3.1 9.772 5.2a22.152 22.152 0 005.824 3.2l11.845-23.4-5.923-2.3z" fill="#F2AB8F" class="Vector_85"/>
<path d="M84.949 140.3l-8.982-4.2-14.806 31.4 9.377 5.2 14.41-32.4z" fill="#148C78" class="Vector_86"/>
<path d="M273.97 233.6l8.193-41.3s-168.984-14.9-194.55-56.5c0 0-19.938 21.6-22.307 37.7-.098 0 175.795 76.3 208.664 60.1z" fill="#F2F2F2" class="Vector_87"/>
<path d="M254.328 237.2c-36.028-1.5-144.308-43-190.403-62.3 1.875-3.4 2.171-8.1 4.639-11.6 18.556 14.8 66.034 33.9 116.867 43.9 29.908 5.9 78.965 10.9 95.35 12.8l-.691 16c-5.231 1.2-25.071 1.2-25.762 1.2z" fill="#E5E5E5" class="Vector_88"/>
</g>
</g>
<circle cx="280" cy="200" r="10" fill="red"/>
</svg>
</div>
I want to auto generate an imagemap type of result for a raster image. I was able to supply this image as a PNG:
The original SVG for this looks like this:
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<g>
<rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<rect id="svg_1" height="67" width="54" y="119.5" x="125.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
<rect id="svg_3" height="67" width="54" y="119.5" x="180.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
</g>
</svg>
Once I traced it using the library: https://github.com/jankovicsandras/imagetracerjs I get back path data like this:
<svg width="156" height="114" version="1.1" xmlns="http://www.w3.org/2000/svg" desc="Created with imagetracer.js version 1.2.3" >
<path fill="rgb(60,60,60)" stroke="rgb(60,60,60)" stroke-width="1" opacity="1" d="M 20 20 L 131 20 L 131 89 L 20 89 L 20 20 Z M 22 22 L 22 87 L 74 87 L 74 22 L 22 22 Z M 77 22 L 77 87 L 129 87 L 129 22 L 77 22 Z " />
<path fill="rgb(255,255,255)" stroke="rgb(255,255,255)" stroke-width="1" opacity="1" d="M 0 0 L 156 0 L 156 114 L 0 114 L 0 0 Z M 20 20 L 20 89 L 131 89 L 131 20 L 20 20 Z " />
<path fill="rgb(255,255,255)" stroke="rgb(255,255,255)" stroke-width="1" opacity="1" d="M 22 22 L 74 22 L 74 87 L 22 87 L 22 22 Z " />
<path fill="rgb(255,255,255)" stroke="rgb(255,255,255)" stroke-width="1" opacity="1" d="M 77 22 L 129 22 L 129 87 L 77 87 L 77 22 Z " />
</svg>
I would like to go back to the rect or polygon method so I can measure the area of each object so that if there were traced text I could exclude it / flatten it by saying it's total area is lower than allowed as a polygon / rect object.
Is there a way to convert the path data back to where I have 2 separate objects? I want to be able to overlay the results over the original image and allow targeting each square
I try to answer your question as best as I can, but there are multiple solutions here.
If you force imagetracerjs to use only straight line edges (with qtres = 0.00001) , then SVG path elements are polygons, their coordinates are defined in the d attribute: d="M 20 20 L 131 20 ... " in the first example. (More info: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d)
But 1 d attribute is often not just 1 polygon. The shape can include holes, and they are represented as smaller polygons. (More info: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule)
You can extract the d attributes with e.g. Regex, split them by the Z tags (which mean roughly: this shape ends, a hole shape begins) , then use the Gauss's area formula (https://en.wikipedia.org/wiki/Shoelace_formula) on the coordinates to get the areas. You might need to subtract the areas of the holes from the area of the parent shape.
You have 4 separate objects on your image, but some are not trivial. I try to "translate" your SVG result so you can decide which path to process.
ImageTracer output is sorted by colors first. The 1. path is the blackish frame around the two smaller rectangles, technically this is a blackish rectangle with two rectangle holes. The 2. path is white frame around the blackish frame, technically a white rectangle with a big rectangle hole. The 3. and 4. paths are the smaller white rectangles, which might be relevant for you.
There's an alternative to splitting and parsing the SVG string, but it's a bit undocumented, sadly. You can get a tracedata object first, process it, and optionally render it to SVG string later. (More info: https://github.com/jankovicsandras/imagetracerjs#examples )
var options = {qtres:0.0001};
ImageTracer.imageToTracedata(
'example.png',
function(tracedata){
// color layers loop
for(var i=0; i<tracedata.layers.length; i++){
// paths loop
for(var j=0; j<tracedata.layers[i].length; j++){
var thispath = tracedata.layers[i][j];
// processing this path if it's not a hole
if( !thispath.isholepath ){
// accumulating coordinates in [ [x,y] , [x,y] , ... ] polygon
var thispolygon = [];
thispolygon.push( [ thispath.segments[0].x1 , thispath.segments[0].y1 ] );
for(var k=0; k<thispath.segments.length; k++){ thispolygon.push( [ thispath.segments[k].x2 , thispath.segments[k].y2 ] ); }
// TODO: calculate thispolygon area with https://en.wikipedia.org/wiki/Shoelace_formula here
}
}// End of paths loop
}// End of color layers loop
},// End of imageToTracedata callback()
options
);// End of ImageTracer.imageToTracedata()
I hope these help. :)
acknowledgement: reference
[SVG] How to close the path (between the 1st and the last point) and fill the area accordingly:
It's not a single path, so i can't close it with 'Z' at the end
It's not a single path, so I can't close it with 'Z' at the end
Join the paths first.
E.g. the sample from your link is originally
<path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="blue" stroke-width="8" d="M 60 60 C 111.55555555555557 160 163.11111111111114 260 220 300"/>
<path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="red" stroke-width="8" d="M 220 300 C 276.88888888888886 340 339.11111111111114 320 420 300"/>
But if you append the dstring of the second to the first and replace the second M (Move) with L (LineTo), you get this:
<path xmlns="http://www.w3.org/2000/svg" fill="cyan" stroke="red" stroke-width="8" d="M 60 60 C 111.55555555555557 160 163.11111111111114 260 220 300 L 220 300 C 276.88888888888886 340 339.11111111111114 320 420 300 Z"/>
I have also set fill=cyan.
Some of these drawn things are from the linked site and not in the code in my answer.
I'm trying to get an SVG to automatically scale down and fit vertically into its parent container.
The SVG is of a signature, and I want it to shrink vertically to fix into the div in question. Once this happens the width of the div will always be more than large enough to accommodate the rest of the svg.
The fiddle I have is here, and the markup is below.
http://jsfiddle.net/3v4e4/2/
Just messing with it, it looks like setting the viewBox equal to "0,0,1100,100" is about right, but I can't for the life of me generalize a rule for calculating that.
<div style="border: 1px solid black; width: 370px; height: 30px; margin: 30px;">
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 1 80 c 0.11 -0.19 3.59 -7.64 6 -11 c 5.2 -7.24 11.51 -13.76 17 -21 c 1.92 -2.53 3 -5.62 5 -8 c 6.6 -7.87 14.55 -15.43 21 -23 c 0.93 -1.09 1.95 -4.23 2 -4 c 0.14 0.71 -0.63 9.58 0 14 c 0.66 4.6 2.28 9.6 4 14 c 1.22 3.11 3 6.5 5 9 c 1.79 2.23 4.59 4.25 7 6 c 1.17 0.85 2.68 1.83 4 2 c 3.55 0.44 8.37 0.86 12 0 c 7.09 -1.67 14.75 -6.24 22 -8 c 4.65 -1.13 15 -1 15 -1"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 21 52 c 0.12 -0.07 4.58 -3 7 -4 c 3.13 -1.29 6.72 -2.51 10 -3 c 3.14 -0.47 10 0 10 0"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 108 64 c -0.02 -0.75 -0.75 -28.06 -1 -43 c -0.09 -5.56 -0.26 -10.84 0 -16 c 0.07 -1.33 0.21 -3.74 1 -4 c 2.11 -0.7 7.51 -0.39 11 0 c 2.31 0.26 4.63 1.58 7 2 c 3.27 0.58 6.88 0.08 10 1 c 11.18 3.3 23.97 7.93 34 12 c 1.18 0.48 2.27 1.86 3 3 c 2.16 3.35 4.65 7.3 6 11 c 1.2 3.3 1.61 7.33 2 11 c 0.28 2.63 0.68 5.63 0 8 c -1.82 6.37 -4.98 13.73 -8 20 c -1.21 2.51 -2.98 5.17 -5 7 c -5.02 4.56 -11.2 9.21 -17 13 c -2.67 1.75 -5.93 3.14 -9 4 c -5.08 1.42 -10.52 2.26 -16 3 c -7.11 0.96 -13.85 1.58 -21 2 l -13 0"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 185 85 c 0.1 -0.26 4.17 -9.78 6 -15 c 2.97 -8.48 4.86 -16.77 8 -25 c 2.24 -5.89 5.71 -11.27 8 -17 c 1.01 -2.51 1.01 -6.02 2 -8 c 0.43 -0.86 2.4 -2.3 3 -2 c 1.31 0.65 3.69 3.81 5 6 c 3.61 6.01 7.11 12.56 10 19 c 1.4 3.13 2.26 6.59 3 10 c 0.93 4.3 0.84 8.79 2 13 c 3.16 11.44 11 34 11 34"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 247 78 c 0.04 -0.05 2 -2.16 2 -3 c 0 -1.04 -1.01 -3.46 -2 -4 c -2.03 -1.11 -6.17 -0.95 -9 -2 c -6.05 -2.24 -11.84 -5.89 -18 -8 c -6.45 -2.21 -13.17 -3.73 -20 -5 c -7.69 -1.43 -23 -3 -23 -3"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 280 87 c 0.04 -0.32 1.03 -11.97 2 -18 c 0.72 -4.44 2.28 -8.54 3 -13 c 1.31 -8.08 1.67 -16.57 3 -24 c 0.25 -1.37 1.71 -2.7 2 -4 c 0.32 -1.46 -0.11 -5.14 0 -5 c 0.2 0.27 2.38 6.09 3 9 c 0.33 1.54 -0.35 3.42 0 5 c 3.87 17.56 11.56 49.11 13 54 c 0.09 0.32 1.93 -1.97 2 -3 c 0.8 -11.75 -0.18 -27.39 1 -41 c 0.82 -9.44 3.67 -24.16 5 -28 c 0.21 -0.6 3.43 0.92 4 2 c 4.46 8.42 9.16 21.76 14 32 c 0.69 1.47 2.39 2.63 3 4 c 0.62 1.4 0.27 3.58 1 5 c 4.32 8.37 10.8 17.06 15 26 c 3.4 7.25 8 23 8 23"/></svg>
</div>
For scaling of an svg to work, you absolutely have to supply a viewBox which matches the bounding box of the contained elements. In your case that would be something like viewBox="0 0 360 100".
The bounding box can be calculated via javascript, but as I have read the getBBox() method is buggy in some cases. I can't comment further on that, but in this case and on chrome it works, see: http://jsfiddle.net/3v4e4/7/
Note that both getBBox() and setAttribute() are native methods and for setting the viewBox you absolutely have to use these. Using the jquery ´.attr()` method will not work as the SVG DOM is different from the HTML DOM which jquery is designed for: http://keith-wood.name/svg.html#dom
If you're using a modern browser, you might be able to just use your SVG as the src for an IMG and set the height to 100%.
Example: http://jsfiddle.net/kj7Wh/
<div style="border: 1px solid black; width: 370px; height: 30px; margin: 30px;">
<img src="http://openclipart.org/people/StefanvonHalenbach/StefanvonHalenbach_Battle_axe_medieval.svg" height="100%" />
</div>
might not work everywhere, but the zoom command on the svg element
svg{zoom:32%;}
or, you can save the this as an svg file and edit this inside illustrator