Is it possible to apply a warp transformation on an image in a SVG ?
The goal if to "bend" an image, as if it was stuck on a cylinder, therefore going from this :
To this:
No. Not easily.
SVG only supports affine transformations.
If your SVG was pure vectors, you could achieve the affect by manipulating the path points using your own non-affine transformation code. But that wouldn't work for bitmap images.
However you can warp bitmaps with a Canvas element. Or perhaps with WebGL.
Related
I want to draw Hermite Splines in an SVG document.
When looking at the specification of SVG, it turns out that SVG will only support Bézier curves.
One solution is: When generating my SVG document, I could do the interpolation myself, in code, and then write out a whole bunch of linear segments.
However, this will make the SVG output incredibly bloated, as all the sample points along the curve will end up in the document.
Can I have somehow a custom coded curve generation in SVG, which the document viewer will then execute? Does SVG allow procedural content, like PostScript does?
I am having some trouble drawing real-world objects on an SVG map.
context:
I have a map which I converted to an svg file (inkscape), this map is then displayed on a web-page with 100% width/height.
I then want to draw points on this map, those points have coordinates in mm (on a very different and bigger scale), so I need to apply a scale factor and a conversion to... pixels?
that's where the difficulty is for me, SVG file uses "user units" measure system, it is then drawn scaling everything to the frame where it is loaded, I would like to scale my real-world point coordinates system to a "user units"-like reference system so that such points can be dynamically drawn on the page.
the web page is html/svg + javascript and I am using svg.js library to draw everything on it.
any clue about how to make ma transformation to align everything up?
I'm looking for a way to create an responsive image using SVG, where some sections maintain their aspect ratio when re-sized and others are distorted. This pencil, for example, could be resized so the two ends stay the same shape and only the body is stretched, like the image below:
I can do this in HTML5 using CSS3's border-image-slice, e.g.
border-image-source: url("cropped-pencil_clipart.svg");
border-image-slice: 25% 50% 25% 25% fill;
See this codepen for an example. However I can't think of a way to achieve it in a 100% external SVG file that I can use as an image or object. In effect, I want the outer and middle elements to have preserveAspectRatio="none" and the left and right elements to have ="... slice". I know this isn't possible in "conventional" SVG 1.1 and I don't want to use JavaScript or ForeignObject because these would limit the ways I can use the external file.
Are there any clever workarounds that could selectively preserve the aspect ratio for individual parts of an image? I can re-create the source elements as pure paths if that's necessary. I've tried using patterns and even custom markers but without success so far. Any suggestions would be welcome.
When using an feDisplacementMap svg filter, my smooth svg lines are getting all jagged. I could probably render it large and then shrink it down, but isn't SVG supposed to be able to anti-alias?
Okay, so I figured out the answer to my own question: the filterRes attribute: http://www.w3.org/TR/SVG/filters.html#FilterElementFilterResAttribute
In my testing, on Chrome, increasing the filterRes slows things down pretty dramatically.
SVG filters process inputs at the pixel level, not the vector level. As far as an SVG filter is concerned, it's been handed a big rectangle of RGBA pixels to work with. Results from a displacement map can look pixelated because a filter has no idea where the edges that have been displaced are - it's all just pixels as far as it is concerned. (The old semi-transparent pixels that used to be the anti-aliasing have been displaced as well.) However, sometimes you can add another filter or two to solve any problem that this creates. Creative ways to solve this problem:
Take the post-displacement graphic, blur it with a radius of a few pixels then blend the blur back into the original graphic.
Take the post-displacement graphic, do a luminance to alpha conversion, then use that alpha map with a diffuse lighting effect to add a fake anti-alias lighting effect.
Use a convolvematrix with edge detection values to extract edges from the graphic, blur that result and blend it back into the source graphic.
Depending on your graphic, you might be able to use an erode or dilate filter, but that tends to produce boxy highlights and might not work. And of course, you can always tweak your input in SVG (using stroke effects) to "pre-antialias" your source graphic so the result doesn't look so odd.
I'm using Raphael JS to display a scrollable, zoomable map of the world, which is working fine. But any 2D representation of a globe is going to be distorted. If possible I'd like to transform the map so that the top and bottom are pinched in, to make the map at least a little bit more representative of a globe. Is it possible to achieve such effects with Raphael's matrix, or by hacking deeper into it to insert a manual transformation?
You can't achieve this effect with Raphael's tranform (or SVG's native matrix transform). Raphael is an excellent vector drawing library, but trying to use maps on it is somewhat akin to using Illustrator when you should be using a GIS, posible but not ideal.
If you can afford to lose IE 8 =< support, d3.js is an SVG visualization library that supports geographic projections. Take a look at this demo http://mbostock.github.com/d3/talk/20111018/azimuthal.html
Otherwise, I'd recommend getting the source for a map with a projection more suited to your needs, such as this one http://en.wikipedia.org/wiki/File:BlankMap-World6.svg. But then it would be more difficult to convert lon lat to pixels.