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 haven’t been able to get good results from ImageMagick in this instance, but Inkscape does a nice job of scaling an SVG on Linux and Windows: # Inkscape v1.0+ inkscape -w 1024 -h 1024 input.svg -o output.png # Inkscape older than v1.0 inkscape -z -w 1024 -h 1024 input.svg -e output.png Note that you … Read more
To apply both scale and flip, just list both in your transform: transform=”scale(2,2) scale(-1,1)” Or simply combine the values: transform=”scale(-2,2)” Of course, the issue you have with negative scales is that the objects get flipped across the origin (top left) of the SVG, so they can go off the edge of the document. You need … Read more
To display your svg within a canvas, you first have to convert it using a parser/renderer utility such as http://code.google.com/p/canvg/ (code adapted from: Convert SVG to image (JPEG, PNG, etc.) in the browser, not tested) // the canvg call that takes the svg xml and converts it to a canvas canvg(‘canvas’, $(“#my-svg”).html()); // the canvas … 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
You can simply set your svg’s viewBox to its Bounding Box. function setViewbox(svg) { var bB = svg.getBBox(); svg.setAttribute(‘viewBox’, bB.x + ‘,’ + bB.y + ‘,’ + bB.width + ‘,’ + bB.height); } document.querySelector(‘button’).addEventListener(‘click’, function() { setViewbox(document.querySelector(‘svg’)); }); svg { border: 1px solid } <svg version=”1.1″ id=”svg” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px” viewBox=”0 0 500 300″ … Read more
To answer your questions directly: Yes. Catmull-Rom spline is an algorithm to interpolate a series of (x, y, z) points. It will generate a cubic polynomial curve between each two consecutive points. You cannot direcly use Catmull Rom spline for SVG path. You need to convert it to cubic Bezier curve first. For a curve … Read more
I tried to find a good tutorial to link to, but couldn’t find anything that really covered all the issues, so I’m going to write it out step-by-step myself. First, you need to clearly understand what you’re trying to accomplish. This is different for the two types of zooming. I don’t really like the terminology … 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.
You are getting caught out by the last paragraph in this part of the SVG specification Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due … Read more