Illustrator and SVG, an example of getting your vectors onto the web | Highlander Website

  1. Home
  2. vector maps manual
  3. Illustrator and SVG, an example of getting your vectors onto the web | Highlander Website

…however Illustrator has been able to output its work to the web for a while, particularly using SVG, so I thought I would do a little experiment and see how Illustrator outputs to SVG. When you create some artwork you now have several choices in getting that artwork onto a web page. You can… However, there are in effect only two options – export to a pixel-based structure, or export to a vector-based structure. And it is the latter that I am investigating here. …and the result is a pixel-based shape – just zoom in and watch the pixels appear. What about when you Save As? Here you can output as SVG – this being a vector result. This is what I wanted to explore, Illustrator and SVG, an example of getting your vectors onto the web. So what do we actually get? Well, if you make up your own web page, and then use JavaScript to write the SVG commands onto the page, you will get a vector shape – for this example I use Raphaël, a lovely JavaScript library for drawing on your web page. I am also using JQuery. So here is the HTML… …click on Show SVG Code. A text file will open up and you just copy the numbers between the quotes in the path element( &lt,path d=’ ‘ /&gt, )… I found that to get it working I also had to strip out all the carriage returns and some odd control characters to make sure that there was just a string of pure numbers. Once I did that I just copied the numbers into the JavaScript file (noted above). My next examples will be about how to make this interactive and also to explore exactly what the Illustrator HTML5 pack does. If you are looking for high quality training on the packages discussed in our Blog posts then contact us now. We offer a wide range of classes covering topics such Photoshop, InDesign, Illustrator, HTML5, JavaScript, Acrobat, Muse, DreamWeaver and lots more. Photoshop Training InDesign Training Illustrator Training HTML5 Training JavaScript Training Muse Training Blender Training Captivate Training Creative Cloud Training Photoshop Courses InDesign Courses Illustrator Courses Source.

Menu
whatsapp button