Skip to content
Code examples and other supplementary material for the book Using SVG with CSS3 and HTML5.
HTML CSS JavaScript
Branch: master
Clone or download
AmeliaBR Add link to Eevee's Perlin noise tutorial
to the feTurbulence extra article
Latest commit 0bdff8a Oct 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
ch01-overview-files
ch02-bigpicture-files
ch03-style-files Add thumbnail images to the figure & example indexes Jan 10, 2018
ch04-tools-files Add thumbnail images to the figure & example indexes Jan 10, 2018
ch05-shapes-files Add thumbnail images to the figure & example indexes Jan 10, 2018
ch06-path-files
ch07-text-files Add thumbnail images to the figure & example indexes Jan 10, 2018
ch08-coordinates-files
ch09-views-files Add thumbnail images to the figure & example indexes Jan 10, 2018
ch10-reuse-files
ch11-transforms-files Add thumbnail images to the figure & example indexes Jan 10, 2018
ch12-fill-files
ch13-strokes-files
ch14-markers-files
ch15-masking-files Ch15 extra articles Jan 25, 2018
ch16-filters-files
ch17-metadata-files
ch18-interaction-files Add a link to the unused animated gem-click game Oct 29, 2018
ch19-animation-files Use SVG/DOM transform objects in animated gem-click game Nov 1, 2018
ch20-bestpractices-files Chapter 20 Index page Jan 14, 2018
equations Transform functions guide Jan 26, 2018
extras Add link to Eevee's Perlin noise tutorial Oct 5, 2019
guide Add ids & permalinks to transform functions reference Jan 26, 2018
styles Transform functions guide Jan 26, 2018
.gitattributes
.gitignore
README.md
index.html
using_svg_cover-square-700.png Update cover image & images that depend on it Oct 16, 2017
using_svg_cover-square-small.png Update cover image & images that depend on it Oct 16, 2017

README.md

Using SVG: Supplementary Material

Code examples and other supplementary material for the book Using SVG with CSS3 and HTML5, by Amelia Bellamy-Royds, Kurt Cagle, and Dudley Storey (O'Reilly Media, 2017).

This repository contains:

  • All the examples used in the book
  • Screenshots of the examples that were used as figures (beware: these are hi-res JPEG and PNG files)
  • The SVG code (and screenshots) for other figures which were used to explain concepts
  • Index pages for each chapter connecting the filenames to the figure and example numbers in the book
  • Reference sections for quickly looking up SVG syntax
  • Online extras: sections and tutorials that we couldn't fit in the book, with extra examples and explanation

You can download all the files as a zip using the "Clone or Download" button on the main repository page, or you can click through the file listings to view the code directly in GitHub.

To view the live versions of the code in your web browser, without downloading, start from the GitHub Pages version of this repository. For example, you can play the final version of the gem-collecting game from Chapter 18 here.

I'll be updating the repo over October & November 2017, as I convert the extra articles and reference guides to HTML and finish the index pages. If you see any other errors, please file an issue.

These files are covered by the O’Reilly Media policy on the use of example code. Short version: you are free to use the examples in moderation; credit is appreciated but not required. However, please don't integrate a large portion of the example set within a product or documentation. Some fonts and image files are public domain or Creative Commons-licenced content owned by others; see the credits in the book.

Notes on viewing SVG files on GitHub

The GitHub website has a convenient SVG preview mode. When you open a file page, such as this basic line figure from Chapter 5, it may show you what it looks like, instead of the code. To switch views, the <> button on Github (currently labeled "Display the source blob") shows the code, while the button with a page icon (currently labeled "Display the rendered blob") shows the image.

However, many .svg files in this repo won't show correctly in the GitHub preview, because the preview uses an <img> to embed the file. As we warn many times in the books, embedding with <img> means that JavaScript doesn't run, images aren't interactive, and external file resources aren't loaded.

GitHub previews are also not available for the many inline-svg examples that use .html files.

Depending on your browser, Javascript and external files might also be blocked if you download the file and then try to view it in your browser from your filesystem (as a URL starting with file://), without running a local webserver.

Links to the live versions of each SVG and HTML file are available from the companion website: https://oreillymedia.github.io/Using_SVG/

If you want to jump straight to the live version of a particular file, add the folder & file name (from the repo or from the end of the GitHub preview URL) to that website URL. In other words:

In some browsers, you can also right-click on the blank image in the Github preview and select "Open in a new tab", which opens the same data without the no-JavaScript restriction (although it will still have restrictions on accessing other files, because they have isolated the code in a data: URI).

If you have downloaded the examples and want them to work offline, you'll need to set up a local webserver (many options are available) for the example folder.

In practice, to use SVG in a web page with JavaScript or external file resources, you need to either integrate it in the HTML as inline SVG or embed using an <object> or <iframe>. We discuss this in Chapter 2, and look at the embed elements again in Chapter 9.

You can’t perform that action at this time.