The answer is on the answer I flagged, but is in the comments. Basically, see here: http://www.imagemagick.org/discourse-server/viewtopic.php?f=1&t=18816
Run this on Mac with Ports:
sudo port install ImageMagick +rsvg
Here's my original Question:
My test.svg file is here: https://gist.github.com/2727243
Imagemagick version: ImageMagick 6.7.6-9 2012-05-18 Q16 (just updated today)
I have a SVG file the does a defs -> symbol to define an arrow symbol. Later on in the document I xlink:use that symbol. This works fine in Chrome and the arrow comes up and is in its proper position:
However, if I convert the image via imagemagick like so:
convert test.svg test.png
It doesn't work. Here's what I get:
The "use" appears to be ignored completely, and instead the arrow is rendering at the def. At least, near as I can tell.
Am I formatting my SVG wrong for Imagemagick to handle this scenario? Or is this just something that Imagemagick doesn't support properly? I've been looking all over for a definitive answer and can't find one, one way or the other.
I also tried the SVG here: http://www.carto.net/svg/samples/symbol.svg and the symbols did NOT work. So I'm leaning toward Imagemagick being the culprit.
UPDATE: I tried changing the def to the following:
<symbol id="arrow" x="25">
In the browser, the arrow DOES move 25 to the right, but in Imagemagick it sticks to (0,0). This was leading me to believe that it's less about the symbol definition and more about it not translating it properly. However, even if I try a straight transform on the "use" and, even better, remove the "use" entirely, the arrow still appears.
Update: This seams to be a bug in the default SVG renderar in ImageMagick that ignores x and y on use tags (and also ignores transform attributes on g tags). Try to use the rsvg backend instead.
Does it work if you change:
<use xlink:href="#arrow" x="20" y="50"></use>
To:
<g transform="translate(20 50)">
<use xlink:href="#arrow"></use>
</g>
Can you give more detail as to why you have to use IM? If it turns out that IM is useless in this case, surely you would have to use something else? I second Inkscape for this.
That said, perhaps you can still use IM if you're willing to do some XML manipulation. I presume the contents of a symbol could be copied to their <use> locations individually; it's a messy workaround if you have lots of uses of the same symbol, but if you want to stick with IM it may be your only way forward. I'm working on the theory that it's the symbol system that is confusing IM - if the path is 'inline' it might be ok.
Related
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've a web page in which there is a SVG box <svg id='graph'>...</svg>.
I would like to give to the user the possibility to zoom in the SVG box.
I use for this purpose document.getElementById("graph").currentScale*=2; if I want to double the size of the box, for example.
The problem is that all the window is resized, even the HTML elements outside the box.
Do you know the origin of this problem please ?
In order to apply zoom to only svg , use this...
<svg>
<g transform="scale(2)">
</g>
</svg>
This may be off the mark without knowing which browser you're using, but you may not be able to implement currentScale if you're using anything other than Internet Explorer or Microsoft Edge. You can test this for yourself by trying this JSBin in different browsers and see where it scales.
Diving into this deeper, a Google search of "SVG currentScale" found these bug threads from Google and Mozilla discussing similar issues. The Mozilla thread discusses it was a choice made specifically for consistency's sake. SVG's currentScale only applies to container elements and not to inner elements. This could interfere with functions like zoomAndPan used on inner SVG elements. Additionally, better cross-browser solutions are already in place such as scale() via the transform property.
I'm using FabricJS and I encounter a problem with the display of my SVG in the canvas:
the result is displayed outside the selection box of fabricJS (due to a translation ?)
the anchors of the selection disappear after a transformation and then it's impossible to find them back.
Here is a screenshot :
I'm using an output SVG of Potrace and I think it's the origin of my issue.
Here is the code of the SVG: SVG code in pastebin
You can test it with FabricJS on this page: FabricJS Kitchensing example.
Just paste the code of the SVG in the "Load SVG" area, then resize and rotate the section box to display the SVG.
Do you know the part of my SVG code or the part of the fabricjS code that causes the issue ?
If so, can I change it easily by myself ? If not, is it possible for anybody to correct or locate the possible mistake?
Thank you very much for your help.
EDIT: seemingly, FabricJS doesn't like this line of the SVG:
<g transform="translate(0,648) scale(0.098780,-0.098780)" fill="#000000" stroke="none">
And more especially the translate and scale attributes… How to fix it?
EDIT2: the solution would be that the translate and the scale are respectively equal to (0,0) and (1,1) or, better, that they're applied to the coordinates.
Does anybody have an idea to do that with Potrace or JS script?
2 years after, fabricJs is now able to fully parse and manage this SVG.
Just paste the old pasteBin SVG code in the kitchenSink demo and you will see that it loads fine.
Lots of improvement happened recently in the SVG parsing area.
I know this is not an answer as stackoverflow user would expect, but better to know that to think this is may still be a problem.
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 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.