FAQs: SVG animation

$0.00

Clear

Description

To find out more about the diagram above . . . . read on!

FAQs: SVG animation

This is one of a set of SVG animations developed for the lightcolourvision.org NEWS pages. An animation appears above each article.

To view this SVG file on your own computer, start by downloading a copy. Once the image is in your download folder simply drag the file icon into a new browser window (don’t try it with Internet Explorer).

The image was created in Adobe Ilustrator and then animated using VIVUS. The resulting code was then edited in Adobe Deamweaver.

The workflow has to be thorough when using VIVUS or it can give the impression that it doesn’t work at all!!

A starter guide includes:

  1. Separate your design into named layers and order the contents of each layer in Illustrator to get the desired effect. This is important if you plan to edit the XML code output by VIVUS.
  2. Save as from AI to SVG without the “editing capacity” option.
  3. If the animation produced by VIVUS looks fine but doesn’t work in Firefox or Chrome try viewing it in Opera.
  4. Optimise code using SVGO.
  5. Check XML with VALIDATOR.
  6. The top 3 lines of the XML code should look something like this:
<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Light" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 821.1 552.9" style="" xml:space="preserve">

More Information

ABOUT SLIDES

Slides


All images on the lightcolourvision.org website are available for download as either slides or diagrams.

All slides share common specifications:

  • Titles: All slides have titles.
  • Backgrounds: Black, framed with a violet gradient.
  • Size: 1686 x 1124 pixels (3:2 aspect ratio).
  • Slides are available in two file formats: JPG, AI (Adobe Illustrator).

Slides are optimized for viewing on-screen or with a projector.
Diagrams are optimized for printing on A4 pages in portrait format.

ABOUT DIAGRAMS

Diagrams


All images on the lightcolourvision.org website are available for download as either slides or diagrams.

All diagrams share common specifications:

  • Titles: No titles.
  • Backgrounds: White.
  • Size: 1686 pixels wide. So all diagrams reproduce at the same scale when inserted into Word documents etc.
  • Labels: Calibri 24pt Italic.
  • Diagrams are available in two file formats: JPG, AI (Adobe Illustrator).

Diagrams are optimized for printing on A4 pages in portrait format.
Slides are optimized for viewing on-screen or using a projector.

FILE TYPES - JPG

JPG file format


Download the image at the top of this page as a JPG file:

  • All JPG images available for download are 1686px wide.
  • Text on JPG images with white backgrounds is styled as Calibri 24pt Italic.
  • If the image you need is not exactly right, download it as an AI (Adobe Illustrator) file and edit it.
  • All the images on these Resource Pages were created in Adobe Illustrator and are vector drawings.

Did you know:

  • JPG stands for Joint Photographic Experts Group who created the standard.
  • The JPG file extension is used interchangeably with JPEG.
  • JPG files can be compressed for use on websites.
  • JPG files can be placed or pasted directly into MS Office documents.

FILE TYPES - AI

AI (Adobe Illustrator) file format


Download the image at the top of this page as an AI (Adobe Illustrator) file:

  • All AI images available for download from lightcolourvision.org are 1686px wide.
  • All the images on these Resource Pages were created in Adobe Illustrator and are vector drawings.
  • Vector drawing can be scaled up or down without any loss of quality.

Did you know:

  • AI  files downloaded from lightcolourvision.org can be re-edited using Adobe Illustrator for your own personal use.
  • Adobe Illustrator can save or export AI files to other formats including PDF (.pdf), PNG (.png), JPG (.jpeg) and SVG(.svg) etc.

DOWNLOAD AGREEMENT

Download agreement

Download Agreement


Before downloading or cutting and pasting from lightcolourvision.org we ask you to agree to the following terms:

  1. All information, images and other assets displayed or made available for download on the lightcolourvision.org website are copyright. This means there are limitations on how they can be used.
  2. All information, images and other assets displayed or made available for download are solely and exclusively to be used for personal, educational and non-profit purposes.
  3. When you find the resources you need, then part of the download process involves you (the user) ticking a box to let us (at lightcolourvision.org) know we both agree how the material can be used.
  4. Please contact ric.lightcolour[email protected] before considering any use not covered by the terms of the agreement above.

If you are a student, educator or researcher you might also like to read our posts Copyright: Credit where credit’s due and Citation and bibliographies before copying and pasting material into essays, assignments or other academic work. They include advice on avoiding plagiarism and how to credit other people’s words, images and assets before submitting your work for marking or assessment. If you are confused, just ask a friendly teacher, librarian, or other member of academic staff.


Like to know more?

Please contact ric.lightcolour[email protected] if you have questions about any aspect of this project.