8 ms·
Svg.js
- bowerbird 13y agoyay! -bowerbird
- deleted 13y ago[deleted]
- bowerbird 13y agodownvoted by 4 points! my most ever! musta hit a nerve! i'm sure this _looks_ like a non-informative post, at least to some of you, so let me explain exactly why i made it... mine was the first comment on this post, which languished for an hour with nothing, and looked to be on its way to being ignored totally, like the vast majority of posts... i made a comment so people would come and look and maybe, just maybe, add a more meaty one of their own. it worked. i wanted the entry to get some attention, because i believe s.v.g. is a highly underutilized format, and that has been true for about a decade now, more or less, so even though i don't have a lot to say about the topic, because i know so little about it, i wanted to say "right on, thank you!". which is exactly what "yay" meant... could i have dressed it up with a little fat on the bones, so it was more than just "yay"? yes, i could have. easily. but at heart, it still woulda been nothing more than "yay". so i decided to go with _the_plain_truth_of_the_matter_. and if you want to down-vote that, then go ahead and do it. i don't really give a dxmn. i don't have that much "karma", and i don't intend to spend much time trying to procure it, so your little brownie-points don't mean jxck-shxt to me... (they certainly don't deserve any unadulterated profanity!) this post got some attention, and i did my part to help it, so i'm quite happy with what i did. and i'll do it again. -bowerbird
- hiddentaco 13y agoYay! - Hidden Taco
- bestest 13y agogreat timing. I'm in the process of creating an application displaying complex timelines with hundreds of elements, and EaselJS (or any canvas lib I suppose) is quite a handful. it's not like canvas is slow (EaselJS' cache is a savior in this case). it's more like it hurts for me to even think of all the complex operations a canvas lib has to do to cope with various mouse interactions (calculating the objects under the mouse pointer), animation redrawing etc. we'll see how svgjs copes with that.
- rtpg 13y agoI don't know how obvious this might be to you but check out d3 if you haven't (For dealing with data coming in and out)
- tomgp 13y agoI would also suggest checking out D3 if you're not familiar with it. What you've described sounds like a perfect fit.
- arethuza 13y agoOut of interest, I'm considering porting an open source diagramming package that I wrote a while back (before canvas was widely supported) that although it was written mostly in JavaScript use a Flex component to actually render stuff and handle user input - given that EaselJS is pretty much a port of the Flex display object model to JS and canvas I thought it would be a good choice. Have you actually had problems with EaselJS?
- bestest 13y agoporting that would not be a problem, I'm quite sure. but problems? yes. for example, the default EaselJS build strips out such DisplayObject methods that are not documented but are present in the unbuilt source code, e.g. getBounds(). I do understand there are reasons for it being undocumented, sure -- calculating bounds for a raster object may be very expensive on canvas, but since I'm working with strict square shapes, it works for me very well, hence I've got a custom EaselJS build to maintain. I also had some problems with TweenJS (a tween co-lib for EaselJS) -- this was also solved by a custom build, as the downloaded minified version they're currently hosting was not up-to-date with EaselJS' newest changes (at least it wasn't couple of days ago). that said, even though my code is not quite render-agnostic, I'll definitely try out Svgjs, as it's methods are almost one-on-one match to EaselJS'.
- rtpg 13y agoWhy would you minify example code? It's not the animation that interests me, it's how you wrote it (i.e. how easy it is to express in your library)
- eksith 13y agoThis seems to be leveraging capabilities of modern browsers (hence the lack of dependencies) without any crufts, shims etc... for older browsers, which makes it very small. Compared to Raphael ( http://raphaeljs.com http://raphaeljs.com ) this seems to be much leaner. I took a rough scan of the features and they seem to be pretty comparable. But it would be interesting to see a few live demos to see whether they're just as smooth in the delivery. Excellent work!
- dnautics 13y agoI rolled a bunch of functions into a lightweight svg library a while back, haven't really updated it, but if the author wants some of my code, feel free to use it (it should be considered public domain'd): https://github.com/ityonemo/dali.js https://github.com/ityonemo/dali.js part of what i did was to add into the prototype of SVG objects attributes that were getter/setter that you would expect, so the SVGCircle object, now has a cx, cy, rx, ry members. The advantage to this is that JQuery's animate() function has a secret ability to animate object members (I remember understanding why that was there at some point, but now I forget), so you could just use the $.animate() to get all of your animation done, even though those values are in the attrs list and not in the styles attr.
- dan1234 13y agoPlease add an actual licence (MIT, BSD etc) to your files if you want your work to be used by others, it lets people know what is acceptable use.
- SwellJoe 13y agoAnd, just to clarify: Some countries have no legal concept of "public domain" and even those that do, it can be unclear exactly how that impacts users of the code. A good license remedies that problem, and allows people to use the code. MIT and BSD are "public domain"ish licenses, which have stood up to decades of scrutiny and usage by lots of projects. They'd be good choices. But, there are many others that also meet that description.
- dnautics 13y agocan't be bothered to, plus, I don't particularly like the MIT or BSD licenses (they're still licences, and you shouldn't need my permission). Sometimes, I put in a copyheart statement. I also understand the liability part of the licence and I think it's disgusting: Limiting your liability by indemnifying yourself with a statement that no one is going to read, as far as I'm concerned, also means that you've lost. If someone wants to sue me for misusing my software then they can live out the rest of their lives as the miserable, tortured soul that they obviously are. those countries that don't have public domain concepts are obviously putting themselves at an economic disadvantage - so they'll get what's coming to them. I only fear that we are headed that way in this country.
- k__ 13y agoCan I use the filters on a <video>?
- luchs 13y agoYes. See this demonstration from 2007: http://people.opera.com/howcome/2007/video/svg/video-filter.svg http://people.opera.com/howcome/2007/video/svg/video-filter.... Here's a video: http://www.youtube.com/watch?v=mPw0WNrBWuY http://www.youtube.com/watch?v=mPw0WNrBWuY
- k__ 13y agoCool! This is the last big piece I needed for a project, because the CSS filters aren't available everywhere.
- premasagar 13y agoIt's great to see the steady rise of SVG on the web (finally!). I've created a small JavaScript library for SVG, called "Pablo": http://pablojs.com http://pablojs.com It packs in a lot for its size. Pablo lets you create and manipulate SVG, somewhat similarly to using jQuery and Underscore. For those near Brighton, UK - there's a launch event this Friday: http://brightondigitalfestival.co.uk/events/pablo/ http://brightondigitalfestival.co.uk/events/pablo/
- andybak 13y agoIt's a while since I checked http://caniuse.com/svg http://caniuse.com/svg and it's nice to see it green across the board. Even the mobile browsers.
- danmaz74 13y agoSuggestion: I see that there are two examples down the page, but I would suggest to also feature them in the menu.
- premasagar 13y agoCheers for the feedback. Do you mean to add something like "Examples" to the navigation links at the top?
- danmaz74 13y agoYes, for example - even better, a big button with "See it in action" or something similar. What's important is to make it very easy to find something cool - that for a graphics library is very important. Good luck :)
- premasagar 13y agoI'll look into that. Thanks.
- karol 13y agoHow does it compare to raphael.js?
- astalwick 13y agoRaphael really goes deep on the browser compat side of things. It supports IE6, falls back to VML. As a result, it's quite a bit heavier than SVG.js. Raphael also seems to be a bit more about abstracting SVG away from you, where SVG.js is more direct manipulation of the SVG document.
- wout 13y agoNicely put! I wrote svg.js because I ran into limitations with Raphael. The great thing about Raphael is its compatibility with older browsers, but it is also its weakest spot because VML doesn't do everything SVG does, thereby limiting possibilities. I wanted a library that still breathed SVG while providing a more unified API. I think too much abstraction leads to isolation. It's important to stay in touch with the underlying language, SVG.
- deleted 13y ago[deleted]
- wiradikusuma 13y agoThe site in inaccessible at the moment (maybe under load). Is this can be used as a shim for d3.js?
- sambeau 13y agoIt's great to see more SVG libraries arriving and SVG.js and Pablo.js look like interesting new tools. While tools to dynamically generate SVG are needed sometimes the big future of SVG is artist-created images, so we generally in need of ways to manipulate , animate and add-to existing existing SVG images. SVG markup is already a better: clearer, faster, more embeddable way to create SVG images. Our tools should focus on adding value to the markup. I use a lot of SVG these days and, sadly, SVG has to come with caveats. It currently performs terribly on iOS devices (especially large, detailed images) and there is no way to create progressively detailed svgs or mark areas for baking. Webkit did have an SVG scrolling bug where svgs were constantly repainted but, thankfully, that is fixed now. Another gripe is SVG drawing tools. I am using a rather strange hodge-podge of a workflow (especially as I am a Mac user). Microsoft Expression Design → export as XAML → translate XAML to SVG. It's actually quite effective / sensible for a few reasons 1) Expression Design is now a free download 2) XAML and SVG are very similar so the translation is reasonable straight-forward 3) Expression Design gives accurate pixel previews (and I have a second SVG testing tool that can flick between SVG and PNG to see where there are problems). My tools are written in Go and may be of use / interest to other people. Let me know if you'd like to try them (caveat: they are one-user-one-developer-tools — me — so there is a layer of polish missing that I am happy to live with but you may not) and I'll work out how to upload them to GitHub.
- palmer 13y agoGreat points you bring up on poor IOS performance when rendering SVG's. I do a lot of SVG graphics work in D3 and it's something I hope will improve. I haven't myself, but have you tried two.js for SVG manipulation? It seems geared towards that.
- PixelCut 13y agoDid you try WebCode (http://www.webcodeapp.com/ http://www.webcodeapp.com/)? It is a vector drawing app for Mac that instantly generates nice, clean and readable SVG code. You can also choose to generate HTML/CSS and JavaScript/Canvas code from your drawings.
- sambeau 13y ago
- sschueller 13y agoThe Clock demo is wrong. If you are going to already use the Swiss Railway face (The SBB will not be happy) you need to also have the second hand run continuously as well as have it stop at the top. Like this: <object data="http://www.3quarks.com/images/svg/station-clock.svg" http://www.3quarks.com/images/svg/station-clock.svg" type="image/svg+xml" width="200" height="200"> <param name="dial" value="din 41091.1"/> <param name="hourHand" value="swiss"/> <param name="minuteHand" value="swiss"/> <param name="secondHand" value="swiss"/> <param name="minuteHandBehavior" value="stepping"/> <param name="secondHandBehavior" value="sweeping"/> <param name="secondHandStopToGo" value="yes"/> <param name="secondHandStopTime" value="1.5"/> <param name="backgroundColor" value="rgba(0,0,0,0)"/> <param name="dialColor" value="rgb(40,40,40)"/> <param name="hourHandColor" value="rgb(20,20,20)"/> <param name="minuteHandColor" value="rgb(20,20,20)"/> <param name="secondHandColor" value="rgb(160,50,40)"/> <param name="axisCoverColor" value="rgb(20,20,20)"/> <param name="axisCoverRadius" value="0"/> <param name="updateInterval" value="50"/> </object>
- dan1234 13y agoMondaine licensed the Swiss Railways design[0] but don't use the constant motion mechanism, maybe the demo is emulating their watches? [0]http://en.wikipedia.org/wiki/Mondaine http://en.wikipedia.org/wiki/Mondaine
- sschueller 13y agoMondaine used to make a watch that mimics the Swiss railway movement. Is was called stp2go, it looks like they just re-released it[0]. The old one had problems and would loose time quickly. [0]http://www.dezeen.com/2013/08/07/stop2go-by-mondaine-at-dezeen-watch-store/ http://www.dezeen.com/2013/08/07/stop2go-by-mondaine-at-deze...
- wout 13y agoIt says "inspired on", not "a replica of". But you're always welcome to fork and improve! https://github.com/wout/svg.clock.js https://github.com/wout/svg.clock.js
- rhengles 13y agoSVG is great, the only feature I miss is word-wrapping. Does any of these libraries have automatic support for breaking long strings in paragraphs? I have done myself something similar [1] for PHP's Zend\Pdf library, calculating string lengths and breaking lines. Also, it is worth mentioning Dojo's GFX library. [1] https://github.com/rhengles/Ari-PdfHelper https://github.com/rhengles/Ari-PdfHelper