SVG Paths - How do I translate the origin automatically?

Question

I'm attempting to create SVG paths from various SVG font glyphs. This is an example:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0,1500) scale(1,-1)">
<path d="M1879 1108Q1889 1073 1889 1038Q1889 935 1817 863T1642 791Q1604 791 1567 802L1326 561L1873 38L1655 -180L1131 367L902 137Q913 100 913 63Q913 -41 842 -113T666 -185Q631 -185 596 -175L786
15L599 202L409 12Q399 47 399 82Q399 185 471 257T647 329Q682 329 717 320L952 554L612 909L784 1081L1138 741L1384 987Q1375 1021 1375 1056Q1375 1161 1447 1233T1622 1305Q1658 1305 1693 1295L1503 1105L1689 918L1879 1108ZM606 1258L435 1087L402 1120L573
1291L606 1258ZM1168 1230Q1105 1255 1038 1255Q937 1255 872 1191L498 817L537 778L395 635L156 874L298 1016L342 973L714 1345Q791 1421 879 1421Q1027 1421 1168 1230Z"/>
</g>
</svg>

I understand that scale transform of (1,-1) is required due to an inverted coordinate system (see this related question: Get Font Glyphs as Vectors, manipulate and product SVG or Bitmap)

See: 'translate(0,1500)'.

Is there a way to translate the origin for the path automatically to have it fit within the canvas? I've been scanning the SVG reference here: http://www.w3.org/TR/SVG/coords.html

Thank you

Edit:

Thank you for the hints on using viewbox. I'm manipulating the files server-side, so rendering in a browser or using JavaScript isn't really an option for me. I've ticked adiabatic's answer since theirs was the most helpful to me.

A negative min-y value is what I was looking for. My SVG fonts each contain units-per-em, which will serve as width and height, and an ascent value, which I'll apply as a negative min-y.

adiabatic adiabatic · Accepted Answer · 2011-12-29T10:24:17

I removed the translation and added a proper viewBox attribute on svg. Here's the final product:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.1" viewBox='156 -1421 1733 1606' xmlns="http://www.w3.org/2000/svg">
<g transform="scale(1, -1)">
<path d="M1879 1108Q1889 1073 1889 1038Q1889 935 1817 863T1642 791Q1604 791 1567 802L1326 561L1873 38L1655 -180L1131 367L902 137Q913 100 913 63Q913 -41 842 -113T666 -185Q631 -185 596 -175L786
15L599 202L409 12Q399 47 399 82Q399 185 471 257T647 329Q682 329 717 320L952 554L612 909L784 1081L1138 741L1384 987Q1375 1021 1375 1056Q1375 1161 1447 1233T1622 1305Q1658 1305 1693 1295L1503 1105L1689 918L1879 1108ZM606 1258L435 1087L402 1120L573
1291L606 1258ZM1168 1230Q1105 1255 1038 1255Q937 1255 872 1191L498 817L537 778L395 635L156 874L298 1016L342 973L714 1345Q791 1421 879 1421Q1027 1421 1168 1230Z"/>
</g>
</svg>

I got the viewBox numbers by asking the svg element what its bounding box was. To do this, open the image up in Safari or Chrome, get to the Javascript console, and type:

var bb = document.querySelector('svg').getBBox();
bb

Then, click on the disclosure triangle to the left of the bb object. This will show you its x, y, width, and height values — put them into the viewBox attribute in that order.

(As an aside, I used to do the scale-and-translate trick to get the coordinate system to something I'm used to — it's because of complications like this that I don't do it anymore.)

SVG Paths - How do I translate the origin automatically?

1 Answers