1 Attachment(s)
Using SVG created in Xara Designer Pro X as web graphics
Hi,
I have made a simple online demo which shows how today it is possibel to use vector based graphics for your websites.
The format is SVG which is "Scalable Vector Graphics", an old very cool standard which is gaining more and more support online.
So if you create graphics for the web, perhaps you should consider using SVG instead of PNG or JPG or even GIF :)
Have a look at my online demo where you can see it in action and also see the HTML and CSS I have used.
I have used the cute demo drawing of a Mini and added some CSS animated scaling, pretty cool.
The products from Xara are perfect for the task as they can export in SVG.
Attachment 93125
Enjoy: http://codepen.io/netsi1964/full/npCrH
You must press "Edit pen" to see the source code.
Re: Using SVG created in Xara Designer Pro X as web graphics
Sorry I didn't look Sten at the source code in Chrome however I am doing an online course at the moment in integrating SVG + HTML 5 and I am also having to use and learn Java script as well. As things progress I am thinking I am now too old to learn a new code language but I am OK with HTML 5 it is easier to learn. Nice example that you have used, I take it from my own experience that Java script was also used here for the zoom.
Re: Using SVG created in Xara Designer Pro X as web graphics
Quote:
Originally Posted by
Albacore
...Java script was also used here for the zoom...
Hi Albacore,
Javascript is not used to zoom. CSS has evolved a lot in the last few years. From CSS 2.1 to CSS 3 many new features has been added, and more will come.
The thing is that today you have many options to manipulate HTML elements using CSS, for instance to zoom (scale). Here is a simple HTML/CSS scale example:
http://jsfiddle.net/netsi1964/Md3hg/
Re: Using SVG created in Xara Designer Pro X as web graphics
That is a neat site and thanks for a look at the code you used on a 7:1 scale. I will have a proper look at the site and may join so that I can use some of the features but I use webkit at the moment for SVG, just about on top of it.