
Svg.js - lelf
http://svgjs.com/
======
sambeau
It'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.

~~~
PixelCut
Did 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
I keep meaning to but haven't got round to coughing up the £35. It does look
amazing and is (one direction) of the sort of thing I was talking about. I'd
need to see the javascript it generates before I could happily include it a
project.

------
premasagar
It'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/)

~~~
danmaz74
Suggestion: I see that there are two examples down the page, but I would
suggest to also feature them in the menu.

~~~
premasagar
Cheers for the feedback. Do you mean to add something like "Examples" to the
navigation links at the top?

~~~
danmaz74
Yes, 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
I'll look into that. Thanks.

------
dnautics
I 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
Please 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
And, 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
can'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.

~~~
heynk
It's not just about removing the liability off of you, the author. A clear
license also removes the liability of anyone using your code in a production
environment that you may feel like suing someday.

~~~
dnautics
If you can't trust that I am a decent human being, without the crutch of a the
law to protect you, don't use my software.

~~~
moocowduckquack
We don't know you to trust you. There are plenty of people who are not decent
and 'just trust me' is rarely reassuring. And you don't need to indemnify
yourself in a licence. Poul-Henning Kemp doesn't indemnify himself with his
beerware.

[https://fedoraproject.org/wiki/Licensing/Beerware](https://fedoraproject.org/wiki/Licensing/Beerware)

~~~
dnautics
>We don't know you to trust you.

then don't use my code. In the end, what you do is your choice, but I'd rather
not get the state involved in my acts of sharing - and that should implicitly
suggest that I'm not interested in leveraging the state to take from you. If
you can't trust that, then fine. I'm sorry for you.

~~~
moocowduckquack
It isn't that though, you are giving permission here quite clearly so if
someone stumbles across this thread then they know some of the intention,
however if they found the code without knowing the provenance, then they may
not know that it is considered open to use, given the society in which we
live.

Now I am not suggesting that you strap boilerplate to it, however a note that
reassures people of their freedom to use the code without fear of reprisal is
a polite consideration.

It is not because of wishing to be protected by the law, but rather trying to
avoid being bashed over the head with it at some unspecified future time.

To expect complete strangers to trust that they understand your motives and
opinions on the matter of whether they can use your work without worrying
about it, would seem to be a stretch, at least in the general case unless it
is made reasonably explicit, because a lot of the time society does not act
that way and so it is useful to have some form of social signalling to let
people know what the score is, which is all that licences are anyway, when you
get right down to it.

And as far as trust goes, this is not a binary proposition, the middle ground
is vast and has jungles in it.

~~~
dnautics
>Now I am not suggesting that you strap boilerplate to it, however a note that
reassures people of their freedom to use the code without fear of reprisal is
a polite consideration.

I might do that. My other software comes with copyheart notices, I just hadn't
gotten around to tacking it onto dali yet.... Originally dali is part of a
now-on-ice project, which carried the notice.

~~~
moocowduckquack
Sorry by the way for nagging, is good of you in the first place to give stuff
away for free without people like me then winging about the way you choose to
do it. :)

------
eksith
This 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!

------
sschueller
The 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
Mondaine 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
Mondaine 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-
deze...](http://www.dezeen.com/2013/08/07/stop2go-by-mondaine-at-dezeen-watch-
store/)

------
rtpg
Why 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)

------
bestest
great 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.

~~~
arethuza
Out 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
porting 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'.

~~~
arethuza
Cool - thanks for that - I will have a look at Svgjs as well.

------
rhengles
SVG 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)

------
k__
Can I use the filters on a <video>?

~~~
luchs
Yes. See this demonstration from 2007:
[http://people.opera.com/howcome/2007/video/svg/video-
filter....](http://people.opera.com/howcome/2007/video/svg/video-filter.svg)

Here's a video:
[http://www.youtube.com/watch?v=mPw0WNrBWuY](http://www.youtube.com/watch?v=mPw0WNrBWuY)

~~~
k__
Cool! This is the last big piece I needed for a project, because the CSS
filters aren't available everywhere.

------
wiradikusuma
The site in inaccessible at the moment (maybe under load). Is this can be used
as a shim for d3.js?

------
karol
How does it compare to raphael.js?

~~~
astalwick
Raphael 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
Nicely 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.

------
bowerbird
yay!

-bowerbird

~~~
bowerbird
downvoted 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
Yay!

\- Hidden Taco

