You can use the vector-effect property set to non-scaling-stroke, see the docs. Another way is to use transform(ref). That will work in browsers that support those parts from SVG Tiny 1.2, for example Opera 10. The fallback includes writing a small script to do the same, basically inverting the CTM and applying it on the … Read more
MDN says that xlink:href is deprecated in favor of href. You should be able to use the href attribute directly. The example below includes both versions. As of React 0.14, xlink:href is available via React as the property xlinkHref. It is mentioned as one of the “notable enhancements” in the release notes for 0.14. <!– … Read more
Give Icomoon a try. You can upload your own SVGs, add them to the library, then create a custom font combining FontAwesome with your own icons.
According to SVG spec, alignment-baseline only applies to <tspan>, <textPath>, <tref> and <altGlyph>. My understanding is that it is used to offset those from the <text> object above them. I think what you are looking for is dominant-baseline. Possible values of dominant-baseline are: auto | use-script | no-change | reset-size | ideographic | alphabetic | … Read more
I know it’s a bit late in the game, but I remembered this question from when it was new and I had a similar dillemma, and I accidently found the “right” solution, if anyone is still looking for one: <path d=” M cx cy m -r, 0 a r,r 0 1,0 (r * 2),0 a … Read more
SVG 1.2 Tiny has viewport-fill I’m not sure how widely implemented this property is though as most browsers are targetting SVG 1.1 at this time. Opera implements it FWIW. A more cross-browser solution currently would be to stick a <rect> element with width and height of 100% and fill=”red” as the first child of the … Read more
How to remove transforms in Inkscape Open svg file in Inkscape Go to Edit -> Select All Go to Object -> Ungroup Go to Edit -> XML Editor Find “transform” attributes in layers and delete them How to move all objects altogether without creating another transform attributes Go to Edit -> Select All in All … Read more
The purpose of raw.github.com is to allow users to view the contents of a file, so for text based files this means (for certain content types) you can get the wrong headers and things break in the browser. When this question was asked (in 2012) SVGs didn’t work. Since then Github has implemented various improvements. … Read more
Expanding on @wdebeaum’s great answer, here’s a method for generating an arced path: 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, … Read more
Everything in the g element is positioned relative to the current transform matrix. To move the content, just put the transformation in the g element: <g transform=”translate(20,2.5) rotate(10)”> <rect x=”0″ y=”0″ width=”60″ height=”10″/> </g> Links: Example from the SVG 1.1 spec