Vector Graphics Resources

Last updated: 27 May 2009
Published in: Creating new digital media
Tags: animated graphics | drawing | illustration | illustrator | svg | vector graphics

Comments (0)

Summary

The links listed here have been gathered to provide a useful collection of vector graphics resources.

Contents

• Vector graphics - introductory information
• Scalable Vector Graphics (SVG)
  
• Vector graphics software
• Vector graphics viewers/plug-ins
• Vector graphics tutorials

Links were checked to be correct in May 2009. JISC Digital Media is not responsible for the content on external sites.

Vector graphics - introductory information

• Introduction to the Vector Image Format
  JISC Digital Media’s introductory guide
• Vector vs. Bitmap Graphics - An Introductory Guide
  An introduction to the differences between raster and vector graphics.
• DevX Reference Guide: Graphics Technical Options and Decisions
  A site devoted to the basics of web graphics, including a section dealing with image file formats and vector graphics.
• Mike’s Sketch Pad - Illustration Software Terminology
  A comparison table of terminology used by various illustration programs: CorelDRAW, Deneba Canvas, Adobe Illustrator and Macromedia FreeHand (note: since Adobe’s acquisition of Macromedia, FreeHand is no longer developed and has not been updated since 2004, though Adobe still sell and support it).

Scalable Vector Graphics (SVG)

• Adobe SVG Viewer
  Some web browsers, including later versions of Firefox, Opera and Safari, natively support many - but not all - SVG features. Others, such as Internet Explorer, require Adobe’s free SVG viewer plug-in. Note that Adobe has stopped developing and supporting the viewer, but it is still available for download. Even if you already have the plug-in or are attempting to view SVG content in a browser which natively supports SVG, you may experience problems with older or incorrectly marked-up files.
• W3C - Scalable Vector Graphics
  The official W3C (World Wide Web Consortium) SVG pages.
• W3C - Scalable Vector Graphics 1.1 Specification
  The specification for the W3C Recommendation, defining the features and syntax for Scalable Vector Graphics Version 1.1.
• W3C Scalable Vector Graphics (SVG) 1.1 Test Suite
  A series of tests comparing SVG elements against PNG image equivalents
• Adobe SVG Zone
  Adobe’s official SVG site. Includes general information on SVG, demonstrations, tutorials and examples of SVG code, together with information for developers.
• Adobe SVG Zone - Samples and Techniques
  Further Adobe examples and code.
• SVG.org
  A community website for SVG users, developers and enthusiasts to share news and stories.
• SVG Reference
  A browsable cross-referenced index of SVG elements and their attributes with definitions and examples. Also includes a number of images with SVG source code.
• SVG Wiki
  A Wiki for help on Scalable Vector Graphics, with sections covering SVG Specifications, Elements, Implementations and many links to other useful resources.
• Dotuscomus SVG Space
  A personal collection of SVG demos and examples.
• Historical Event Markup and Linking Project
  This site uses SVG for animated and dynamic maps and timelines.
• East Midlands Airport’s WebTrak
  An interactive SVG map of air traffic in the vicinity of East Midlands Airport - replays flights 24 hours behind real time and earlier.
• SVG Implementation and Resource Directory
  A directory of SVG enabled software and services
• SVG Open
  Annual International SVG Conference
• svg.startpagina.nl
  Dutch language site with countless links to SVG resources.
• Open Directory - Computers: Data Formats: Graphics: Vector: SVG
  Links in the Open Directory Project’s SVG category.
• SVG-Whiz!
  Examples of SVG animations
• SVG Wiki - Design Tools
  List of SVG editors (graphical drawing tools and text editors)

Vector graphics software

See JISC Digital Media’s Vector Drawing Software document.

Vector graphics viewers/plug-ins

• Adobe Flash Player
  The Flash Player is required to view Flash content and can be freely downloaded and installed from the Adobe site. Most browsers now come with Flash Player pre-installed.
• Adobe SVG Viewer
  As mentioned above, some web browsers, including later versions of Firefox, Opera and Safari, natively support many - but not all - SVG features. Others, such as Internet Explorer, require Adobe’s free SVG viewer plug-in. Note that Adobe has stopped developing and supporting the viewer, but it is still available for download. Even if you already have the plug-in or are attempting to view SVG content in a browser which natively supports SVG, you may experience problems with older or incorrectly marked-up files.
• Squiggle - The SVG Browser
  SVG browser - requires Batik, “a Java technology based toolkit for applications or applets that want to use images in the SVG format”.
• SVG Wiki Viewer Implementations
  The SVG Wiki provides a full list of available viewers.

Vector graphics tutorials

• Mike’s Sketch Pad - Drawing Basics
  Although these tutorials are quite old, they cover the basics of computer illustration, covering the most common features shared by various illustration programs - Adobe Illustrator, Corel DRAW, Deneba Canvas and Macromedia FreeHand (note: since Adobe’s acquisition of Macromedia, FreeHand is no longer developed and has not been updated since 2004, though Adobe still sell and support it).
• ClipartLab - Vector Graphics Tutorial
  An introductory tutorial from a commercial vector clipart site. The tutorial uses Corel DRAW and Adobe Photoshop, but the principals can be applied using most drawing programs.
• 50 Adobe Illustrator Video Tutorials
  A selection of video tutorials covering many of Illustrator’s features.
• A Comprehensive Guide: Illustrator’s Paintbrush Tool and Brush Panel
  Beginner’s guide to using Illustrator’s brush tool
• Adobe Flash Tutorials - Best Of
  A wide range of tutorials on using Flash divided into categories including basic elements, buttons, animations, advanced elements, images and videos.
• Turn a Boring Bar Graph into a 3D Masterpiece
  More vector and illustration tutorials are available from Vectortuts+
• Veerle’s Blog - Illustrator and Photoshop Archives
  Graphic design tips and tuorials from Veerle Pieters
• WebReference.com - Graphic Underworld Tutorial
  Tutorial comparing raster and vector formats.
• IdeaBook.com - Design Resources
  Tutorials, step-by-step guides, articles and links to further resources on design and production (logos, charts, graphs, layout, graphics).
• Graphics Software Tutorials and User Resources
  Tutorials and resources for learning and using graphics software.
• XML.com - An Introduction to Scalable Vector Graphics
  An introduction to SVG using a hands-on tutorial.
• SVG Basics
  Examples and tutorials covering the basics
• Causeway Graphical Systems - SVG Examples
  SVG examples and code for creating charts and graphs.
• KevLinDev - Tutorials
  Tutorials in the fundamentals of SVG.
• Webreference.com - SVG: Open for Business
  A quick tutorial on how to create an SVG bar chart with text, shadows, and some simple animation.
• Introduction to Presenting Scientific and Medical Data on the Web using Scalable Vector Graphics
  An introductory tutorial that covers “comparison with other technologies for similar purposes, integration of the SVG documents into HTML pages, explanation of the most basic possible examples, and the development of an example for interactive presentation of action potentials within the human nervous system.”

Last updated: 27 May 2009
Published in: Creating new digital media
Tags: animated graphics | drawing | illustration | illustrator | svg | vector graphics

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Comments (0)