Welcome to TalkGraphics.com
Results 1 to 4 of 4

Hybrid View

  1. #1
    Join Date
    Aug 2000
    Location
    Skødstrup, Denmark
    Posts
    251

    Cool 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.

    Click image for larger version. 

Name:	mini.png 
Views:	275 
Size:	71.2 KB 
ID:	93125

    Enjoy: http://codepen.io/netsi1964/full/npCrH

    You must press "Edit pen" to see the source code.
    Last edited by netsi; 21 November 2012 at 02:11 PM.
    Cheers,

    Sten
    "Everything has two sides"
    IP

  2. #2
    Join Date
    Jun 2002
    Location
    Dunoon, Scotland
    Posts
    4,778

    Default 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.
    Design is thinking made visual.
    IP

  3. #3
    Join Date
    Aug 2000
    Location
    Skødstrup, Denmark
    Posts
    251

    Default Re: Using SVG created in Xara Designer Pro X as web graphics

    Quote Originally Posted by Albacore View Post
    ...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/
    Cheers,

    Sten
    "Everything has two sides"
    IP

  4. #4
    Join Date
    Jun 2002
    Location
    Dunoon, Scotland
    Posts
    4,778

    Default 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.
    Design is thinking made visual.
    IP

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •