I would like to take a multiline block of text and display it in SVG. I would like to keep the lines as lines. Is there a proper way to do this?
I am using Inkscape for my base drawing and Batik for my rendering. It seems the two do not agree on how to do this.
Inkscape is creating a structure like this:
<flowRoot
xml:space="preserve"
id="flowRoot3089"
style="font-size:16px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
transform="translate(19.71875,334.88681)">
<flowRegion id="flowRegion3091">
<rect id="rect3093" width="50.78125" height="75" x="34.765625" y="155.89932"/>
</flowRegion>
<flowPara id="flowPara3123">Item 1</flowPara>
<flowPara id="flowPara3137">Item 2</flowPara>
<flowPara id="flowPara3139">Item 3</flowPara>
</flowRoot>
However, this is not acceptable to Batik for some reason.
Inkscape sets the SVG version of the document to 1.1 instead of 1.2, but still uses flowing text.
The simple solution for you is to edit your svg document and change the SVG version attribute to 1.2. Inkscape will not change it back to 1.1 and it handles the 1.2 version specifier fine.
Batik will then be happy to provide most functionality, however you'll also run into another Inkscape bug if you mess with pretty much any of the text attributes within the flow root that Inkscape creates. It sets the background color to the selected foreground color for the text, which means if you set the text color to red in Inkscape, when batik renders it, you'll see a red square ... the text is there, but its red too, so not really visible. This an Inkscape bug and is clearly visible in the code for the flowRegion -> rect element.
The solution is to manually edit your flowRect attributes after tweaking them with inkscape.
Batik also seems to do better if you use the standard svg output rather than inkscape svg output.
This is not acceptable since flow* elements are non-standard elements. It comes from an SVG1.2 draft that has never been accepted and it is designed to wrap text in custom shapes. Only Inkscape and some builds of Opera support it. So, don't use it, at least for the moment.
If you don't need text wrapping (and you don't seem to, but I don't understand what you mean by "I would like to keep the lines as lines"), I suggest you use the basic <text/> element.
I'd suggest <text> with <tspan> children. Inkscape can generate that for you quite easily, just don't click and drag an area but instead just click where you want the text and start writing, press return where you want a new line.
Alternatively, foreignObject will allow you to include html:
<svg:foreignObject><html:body><div>text here</html:div></html:body></svg:foreignObject>
Doesn't seem to work in Opera or IE, though.
Related
I've been doing some stuff in Illustrator and I have a problem with saving a project in to SVG file that I open in webbrowser, It just looks different.
And it hapens only in SVG, if I save it to PDF or PNG it looks how it should.
What am I doing wrong?
That's how it looks in Ai
That's how it looks in webbrowser
Here's a link to download rar file with .ai and .svg that I have.
Since all browsers render it the same way, it would seem likely that this is a bug in the AI SVG export filter.
To me it looks like you are applying a blend mode ("Overlay" perhaps?) to the white parts on top of the image. That effect ought to be reproducible using SVG filters, but perhaps AI's exporter doesn't support that yet.
If you are using an "odd" blend mode, try changing it, or reproducing the effect another way.
Individual pixel control needed in identical svg conversion is not possible. SVG creates only specific shapes. The Ai app conversion seems to use opacity to provide the color shades. You could probably tweek opacity and add some svg filters to improve the svg.
Print your design in a . pdf file instead of exporting it directly. Then open the printed .pdf back in Illustrator and export the .svg from this one, it shoud do the trick.
is it possible to create a stroke with a dynamic width with SVG? I want to achieve a Calligraphy look like here, here or here.
Is this even possible? It seems customization of strokes in SVG is fairly limited. Even gradients in strokes seem to be non-trivial (see here).
There is a proposal to add into SVG standard a mechanism, that does exactly what you want:
http://www.w3.org/Graphics/SVG/WG/wiki/Proposals/Variable_width_stroke
http://lists.w3.org/Archives/Public/www-svg/2013May/0041.html
There's even an example implementation available here:
https://rawgit.com/birtles/curvy/master/index.html
It is, however, by no means official and we cannot be even sure it'll ever be.
Until then you'll need to stick to Bezier curves and object filling:
You can also use calligraphic fonts, for example - Tangerine available on Google CDN:
This approach requires less work since you don't need to draw everything from scratch, but then again, using third party fonts leaves you with little control over the final result.
You can't dynamically adjust the stroke of a path element. However you could draw a path, use a fill color on it instead of stroke, then double back upon the letters at a slight distance away from the original line.
Also, if you are using the SVG on the web then you can use css fonts on text elements. There are some pretty good cursive fonts that you can use for free... just check google web fonts.
I am trying to make a tool for my website which traces over Japanese characters, showing the stroke order etc.. something like this: http://www.chinesehideout.com/tools/strokeorder.php?c=5pel
I have made a bunch of SVG files in inkscape, which are made up of just curves, one for each stroke of the character. I have then imported these into Raphael using the raphael-svg-import: https://github.com/wout/raphael-svg-import
The SVGs are displaying perfectly, however I want to animate them.
My question is: Is there a way to take each path from the SVG in turn in Raphael, and then animate/stroke them? If so..how??
If you need any more info please say!
Thanks
EDIT: Perhaps I should clarify, when I say stroke I mean progressively draw the line, starting from the first point and ending at the last. At the moment it draws all paths simultaneously and draws the whole of each path at once.
The technique people use in svg for doing this is outlined in this answer. It's probably possible to adapt that to Raphaël, though the Raphaël documentation doesn't list stroke-dashoffset.
Raphaël has a method Element.getSubpath(from, to) that can be used to get only part of a path, that should probably also be an option.
I am working on an application where I need to display color coded indicators. The standard colors will be red/amber/green, but I need to be able to pick any color (e.g. by hex value). The colors are updated dynamically by a script, based on data (dashboard style).
Are there libraries that could help me? I am thinking in particular about using svg or canvas graphics that the script could modify.
Note: the question has been rephrased to better explain the context.
I like this collection on WikiCommons. They are in SVG
http://commons.wikimedia.org/wiki/Tango_icons
Here are a couple of links to start with:
nounproject
openiconlibrary
openclipart
small iconset for use with raphaël
i want to acheive the effect on this page using SVG. As you can see it uses a series of PNG transparent overlays when the user mouses over a polygonal hotspot drawn on a product.
What i want to achieve is the same thing with SVG, but without messing about with creating a load of PNGs, so that when the user mouses over an area the transparent shape (with link on it) appears over the top. The SVG shape would be built from a set of coordinates exactly as a polygonal hotspot would on an image map.
So i guess my first question is, can this be done with plain old SVG or do i need to use something like Raphael to achieve this? Never seen this effect before with SVG so if anyone has an example like that would be very useful.
Thanks in advance.
There are several ways to get this effect with plain old SVG. Probably the simplest is to use CSS within the SVG. For example:
<style>
.overlay:hover
{
opacity: 0.5;
}
</style>
<svg>
<a xlink:href="http://www.wherever/you/want/to/link/to.com">
<path class="overlay" d="Coordinates of your shape..." />
</a>
</svg>
I've written about various other methods at:
http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
Yes it can be done with SVG only, with or without javascript.
One way to get the effect would be to overlay a white semi-transparent path on top of the image that you want to whiten. Another way would be to use an SVG filter to process the image directly, similar to what I've done here or here to recolor a PNG (view page source and feel free to reuse that in any way you like).
You'll want to make use of the 'pointer-events' property most likely. Here's an example showing how to detect mouse-events on the fill and/or stroke of an svg shape, even if the shape is invisible.