I'm trying to render these files http://registro.soveci.com/dom_izq.svg and http://registro.soveci.com/dom_der.svg with RaphaelJS and raphael-svg-import, but somehow a path appears misplaced on the screen. If you view it with a standard compliant browser, you can see the path being rendered right, so it must be a problem with raphael-svg-import.
Can you provide me some hints??? (I'm new to SVG)
I have been experimenting with SVG for a little bit now and it's a bit of a coincidence because I just finished playing with that plugin today.
The url to a demo I have there also contains zip files in the documentation so you could experiment with these in Inkscape or any SVG editor and see if you cannot configure them to something in your project.
For what ever reason this plugin "likes" some SVG's but not others so maybe you could adapt one of the SVGs in the zip and it will probably work.
The authors know the plugin does not always work but it is gradually improving and even now I think it's possible to write compatible SVG's if you tinker with them.
If you need a facility to convert certain SVG's just to javascript you could use this.
Related
Examples of what I'm looking to do:
I've been looking for a tool to manipulate a loaded svg path and polygon as I can use Snap.svg Free Transform for resizing and rotating.
Well I couldn't find a library besides Paper.js that allows me to have interactive editing of Bezier curves however I don't want to work with canvas at all JUST SVG and I couldn't find anything for the SVG element.
I'm still super confused as all I can find via Codepen and Github are demos in which the svg objects are inline HTML and the Javascript is targeting the inline HTML that wasn't dynamically added.
I know there are libraries like Vector.js, Snap.svg or SVG.js that I maybe able to use. However while reading up on the API's I know SVGGeometryElement has a method getPointAtLength() which returns the point at a given distance along the path.
My question is first is there a js library that allows me to have interactive editing of Bezier curves both fill and stroke? If so where and is there a demo to help me understand how to use it? If there isn't based upon what I want to do which is to to ONLY work with SVG what library of the 3 is the best and why?
The getPointAtLength() method is not useful for your needs. You need to be able to access a list of path commands and their parameters. But getPointAtLength() is not that.
SVG has an old API for accessing path segments. However this is deprecated now, because it was somewhat ugly and difficult to use. I'm not sure which of the browsers, if any, still support it.
There is also a new API that has been proposed in a new SVG Paths module.
I've lost track of which browsers have removed the old API, and which have implemented the new one. You'll need to check.
If you want to be backward compatible, Philip Rogers has created a polyfill library for the old API.
If you get desperate, there are other libraries for parsing path definitions that you could use. For example: https://www.npmjs.com/package/svg-path-segments. Note that this is not a recommendation. I have not used that library.
This is my first time working with SVG files and I wasn't able to google the answer for this question. I have a .svg illustration created from Adobe Illustrator. I want to load this image into a web page and be able to manipulate it with javascript. Is there a javascript library that allows me to do this? The library has to work on current mobile devices. Fantasy code that illustrates what I'm trying to do:
<img src="pic.svg" id="pic"/>
$('#pic').rotate('90')
$('#pic').scale('200%')
$('#pic').move(x, y)
I know you can manipulate DOM elements like this using javascript, but will the svg image be scaled without distortion? Also, I think SVG has other fancy transformations that javascript doesn't normally support. Ideally, I'd want to use those too.
If you incorporate your SVG graphics with <img>, you'll be able to do exactly the same stuff as with any other image format - no more and no less. (The only benefit might be that you can change width/height without losing crispness.)
If you want to transform or otherwise change any elements of the SVG itself, it's a good idea to make the SVG inline. Maybe this answer helps. If your SVG was generated by Illustrator, cleaning the SVG might drastically decrease the file size and make it more friendly for JavaScript manipulation.
If you stick with <img>, you can still use CSS3 transforms (see the specs for an exhaustive description).
I have a WordPress site with lots of custom fields that contain images in .svg format.
Now I want to add support to IE8, which won't display SVG, so I need to find a solution.
The first thing I think of is to add custom fields to add a .png along with every .svg on the site, but this means to go through each and every custom fields to modify them...
I've also seen that there's a library called Raphael.js that supports IE, but it's intended to draw the SVGs, and I already have many complex SVGs created with Illustrator, so this is not a solution for me...
Is there any way (i.e. JS library) that, each time you want to load a SVG with:
<img src="http://mydomain/Homepage-1.svg" alt="Image Alt">
it automatically converts it to plain image?
You can include a call for Adobe's SVG Viewer for IE8
see:
http://www.iegallery.com/en-us/Addons/Details/444
It still works nicely for svg including filters.
Adobe SVG Viewer was discontinued in 2009. I still have clients from time to time that have need of support for IE8. This page has a few polyfills worth trying:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#svg
You'll need to decide what you want your fallback to be, Flash, Canvas, Silverlight, and then choose the right solution for you.
I´m new to Raphael and would like to do some basic questions on how to architect my app:
I need to draw models on a visual graphical editor and save them to files (I call them screens). At runtime, I need to load these screens and animate them from server data using Ajax.
Using SVG I can load data using this simple command:
<object id="svgobject" type="image/svg+xml" data=".\svg\svgfilename.svg"></object>
Also, on SVG, we can use some graphical visual editors and that´s all we need to built the screens. The rest if javascript code to get element ids and change their attributes at runtime based on ajax call to get server data.
As SVG is not supported on old browser, one natural choice is to go for Raphael, but I don´t know if there is visual graphic editor that support Raphael scripting language and how to save/load these scripts at runtime.
So, What would be the best approach to visual edit my models, save them to a file and load at realtime using Raphael ?
Ian's answer is one solution. The other way of doing this is to convert SVG documents to a data structure that Raphael can understand.
For relatively simple SVG images you can use svg2path. It converts SVG files (or svg from a URL) to paths that can be loaded into Raphael. From the documentation, running the following on the command line:
svg2path some.svg
generates a path file called some.path that can be loaded in Raphael (presumably using the paper.path() method).
It's available on github and npm.
You could use a plugin like https://github.com/wout/raphael-svg-import or https://github.com/jspies/raphael.serialize https://github.com/crccheck/raphael-svg-import-classic to get you started maybe. I think you may need to do some extra work to cope with groups and Raphael.
Edit to clarify, I'm not sure from your other comments what you mean by Raphael Mode from a graphic editor. You can just the graphic as a straight SVG and import. I'm not sure why there needs to support Raphael scripting.
The VectorEditorJS is a nice starting point for you.Look into editor.js to build or rebuild your own functionality over it.Here's a demo.
EDIT
The SVGEdit demo has got code to save the vector as an svg.You can look into the code.
I want to create a drawing application where I can place text and images on a canvas. Those elements also need to be interactively manipulated. Eventually the resulting canvas has to be exported to a vector based PDF. An excellent contender for this functionality would be SVG.
However, this application also needs to be crossbrowser compatible. I've been browsing around for some time now and have seen a couple of solutions available. I found among others RaphaelJS and Google's SVGWeb for working with SVG.
Now for converting those SVG files to a PDF I'm not sure if for instance Batik will offer me what I am looking for.
Also, how would bitmap images be handled when converting the SVG to PDF?
Images within a PDF have to be part of the PDF. They can use any number of compression techniques (jpeg, fax, jbig2, zip, gif, a couple others), various bits per color, various colors per pixel, and so forth... but the pixels must be defined within that PDF.
I've used Batik myself. A little clunky in combination with iText (surprisingly large amount of code involved), but quite serviceable. The only thing that really bugged me was that it wouldn't draw text as text... Batik insists on drawing it as paths. They may have overcome this since I started using it a year or two ago. But that was kind of a deal breaker (HUGE pdf bloat) so we ended up rendering our text separately: PITA, potential z-order issues (that never came up for us), plus a couple subtle interal layout issues that didn't turn up till later.
Batik supports script, animation, and a variety of Other Things that don't really matter within the bounds of SVG->PDF conversion. There's at least one other Java SVG library out there that is much more compact(not as feature rich... half empty/half full), though I can't for the life of me remember the name at the moment. The name came up on the iText mailing list maybe a year ago? Don't recall exactly. Quite some time ago, and AFTER I got Batik working. Ah well.
Batik can convert svg to pdf, Inkscape or Adobe Illustrator can too AFAIK.
I think that Inkscape would be your best choice here, it mostly sticks to SVG 1.1 for the shapes it implements (using a few of its own properties, which you can get rid of if you save it as a plain SVG). For me, even when I save as an Inkscape SVG, it displays fine in browsers even with blurs, though it won't work in Internet Explorer. For that, there is no solution besides using an external tool such as (as you've already found) SVGWeb. Unfortunately, javascript support for SVG can differ between browsers, and there is no way to fix this.
As for PDF, I think that raster images are embedded if they are embedded within the SVG itself, or linked if the SVG's is linked. This is easy to do by going to Extensions > Images > select either Embed Images or Extract Images.
You can program a java applet with Processing. It's cross-browser, can export to pdf. Bitmap images would remain bitmap images embedded in the pdf.