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?
Related
I am working on a program that generates crosshatched images and now stippled images as SVG from raster input. With stippling however, representing each dot as a filled circle has made it such that medium to large sized raster images can result in SVG files that are so large Illustrator and InkScape fail to open them.
I am however currently making no effort to optimize the representation of stippling in the SVG. Is there perhaps an SVG element that is specially for representing a collection of points? Or can a polyline be styled such that it is rendered as just its vertices represented as circles?
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?
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.
Below is an svg path (the points) which, when given a thickness, displays the grey shape. I have an svg with the outline of the grey shape, and I would like to generate an approximation (I'm assuming the original is impossible to get back) of the original path. Ideally it would work with shapes that intersect, like a lowercase 'e'.
The opposite of this: svg: generate 'outline path'
This is a bit beyond the scope of a SO answer. However there is plenty of information out there on the web. Converting a bitmap to vectors is called "vectorization". The class of algorithms that attempts to get the "skeleton" of the shape is known as "thinning". Google those three terms.
Most of these algorithms are designed to work with bitmaps, but they should be a useful starting point for your situation.
Is it possible to stroke an SVG polyline with an horizontal linear gradient where the gradient's angle changes at every polyline vertex? it would look something like this:
Have a look at tubefy by Israel Eisenberg. There's not currently anything in svg that will give you exactly what you're asking for declaratively. However, tubefy makes use of svg for rendering, and can produce advanced gradients such as the one you're looking for.