CODEWITHSUNDEEP
htmlsvgvector-graphicsadobe-illustrator
Diana Bogdan
Diana Bogdan

Reputation: 91

Adding fancy SVG in Web Pages (tools and workflow)?

Nowadays it's common to see cool interactive SVG art embedded inside pages. I suppose people make their original art in Illustrator and then export SVG? How do they add behavious, etc.

Does anyone have a good resource for PRACTICAL SVG web development?

Upvotes: 0

Views: 378

Answers (1)

Nicholas Wilson
Nicholas Wilson

Reputation: 9696

The first thing is making your SVG. You're unlikely to be able to write your path data manually, unless you are have very simple animations. The most popular editors are Illustrator (but it's very expensive) and Inkscape (just about fine for my purposes, and free). There are plenty of tutorials on how to make things with those. Inkscape can export to fairly neat and standard SVG, which you then will most likely need to animate manually.

The two ways I have added interractivity to my SVGs before is either by putting JS into the SVG itself (quite funky) and importing the SVG into the page with object or img; or by putting the SVG actually inside the page, and operating on it with the same JS as the rest of the page. It isn't hard: anything you could with JQuery to a page, like adding click handlers to items, moving things around, styling with CSS, you can do with the JavaScript. It's very handy.

As far as practical resources go, I use the Mozilla Developer Network a lot (MDN) because it has good resources on the SVG elements, and jQuery has its own excellent documentation as well as a near-infinity of googleable tutorials. Finally, Inkscape and Illustrator come with their own manuals. In a sense, you're probably asking the question because you're looking some really specific site that will make it all easy, but I don't think there is one, simply because it's basically the same web technologies as all the usual stuff you use, with the addition of a few SVG elements to get used to, and those aren't too fiddly if you generate them with a vector graphics package.

Upvotes: 3

Related Questions