├── static_figures ├── appd │ ├── ml.sh │ ├── MLtoSVG.class │ ├── xercesImpl.jar │ ├── ParserErrorHandler.class │ ├── coord.ml │ ├── coord3.ml │ ├── coord2.html │ ├── generic_transformation.ml │ ├── temperatures.ml │ ├── scalar_mult.ml │ ├── simple_translate.ml │ ├── coord.svg │ ├── simple_scale.ml │ ├── coord3.svg │ ├── color_matrix2.ml │ ├── scale_translate1.ml │ ├── scale_translate2.ml │ ├── multiply3.ml │ ├── translate.ml │ ├── add_matrix.ml │ ├── pre_multiply.ml │ ├── scale_translate3.ml │ ├── color_matrix.ml │ ├── scale.ml │ ├── multiply1.ml │ ├── other_transformations.ml │ ├── multiply2.ml │ ├── temperatures.html │ └── generic_transformation.svg ├── ch02 │ ├── cat.png │ └── cat.svg ├── ch11 │ ├── sky.jpg │ ├── cloth.jpg │ ├── smiley.png │ ├── feBlend.png │ ├── makecurve.pl │ ├── background_image.svg │ ├── drop_shadow_text.svg │ ├── background_image_adapted.svg │ ├── diffuse_lighting.svg │ └── luminance_to_alpha.svg ├── expander.sh ├── ch03 │ ├── fig_3_3.png │ ├── fig_3_4.png │ ├── default_coordinates.png │ ├── units_on_svg.svg │ ├── default_coordinates.svg │ ├── using_viewbox_b.svg │ ├── explicit_units.svg │ ├── using_viewbox.svg │ ├── scaled_grid.svg │ ├── using_viewbox_a.svg │ ├── using_viewbox_nogrid.svg │ └── nested_viewport.svg ├── ch15 │ ├── icao_weather_station_codes.txt │ ├── TimeStampUtils.class │ ├── KSJC.xml │ └── TimeStampUtils.java ├── appf │ ├── example_f02.pdf │ ├── example_f02a.pdf │ ├── design.svg │ ├── example_f01.html │ └── example_f02a.fo ├── ch05 │ ├── kwanghwamun.jpg │ ├── ext_style.css │ ├── priority.svg │ ├── internal_stylesheets.svg │ ├── external_stylesheets.svg │ ├── image_element.svg │ ├── fig_0408test.svg │ ├── fig_0113.svg │ └── g_simple.svg ├── ch10 │ ├── kwanghwamun.jpg │ ├── unmasked_graphic.svg │ ├── clip_path.svg │ ├── masked_graphic.svg │ └── minicat.svg ├── ch01 │ ├── cat_eyes.svg │ ├── cat_circle.svg │ ├── cat_whiskers.svg │ ├── cat_transform.svg │ ├── graph_paper.svg │ ├── cat_other_shapes.svg │ ├── cat_paths.svg │ ├── vector_graphic.svg │ ├── cat_text.svg │ └── cat.svg ├── ch04 │ ├── unfilled_star.svg │ ├── line_example.svg │ ├── filling_polygons_example.svg │ ├── polyline_example.svg │ ├── filled_polyline_example.svg │ ├── filled_polyline_figure.svg │ ├── polygon_fill_rule_example.svg │ ├── basic_lines_example.svg │ ├── stroke_width_example.svg │ ├── circles_ellipses_figure.svg │ ├── stroke_opacity_example.svg │ ├── basic_lines_figure.svg │ ├── line_figure.svg │ ├── linejoin_example.svg │ ├── linecap_example.svg │ ├── polygon_example.svg │ ├── circles_ellipses.svg │ ├── rounded_rectangle_example.svg │ ├── stroke_color.svg │ ├── stroke_opacity.svg │ ├── rectangle_example.svg │ ├── stroke_dasharray.svg │ ├── polygon_figure.svg │ ├── stroke_width_figure.svg │ ├── rounded_rectangle_figure.svg │ └── rectangle_figure.svg ├── ch09 │ ├── text_glyphs.svg │ ├── tspan_multi.svg │ ├── tspan_style.svg │ ├── tspan_offset.svg │ ├── vertical_text.svg │ ├── text_anchor.svg │ ├── tspan_positioning.svg │ ├── custom_font.svg │ ├── text_placement.svg │ ├── vertical_text_2.svg │ ├── baseline_shift.svg │ ├── bidirectional_text.svg │ ├── textlength.svg │ ├── switch_language.svg │ ├── text_attributes.svg │ └── start_offset.svg ├── ch07 │ ├── plain_marker.svg │ ├── all_circular_markers.svg │ ├── closepath_differ.svg │ ├── circular_marker.svg │ ├── moveto_lineto.svg │ ├── path_shortcuts.svg │ ├── bad_circular_marker.svg │ ├── generic_bezier.svg │ ├── closepath.svg │ ├── arc_path.svg │ ├── bad_multi_marker.svg │ ├── final_marker.svg │ ├── multi_quadratic_bezier.svg │ ├── cubic_polybezier.svg │ ├── quadratic_bezier.svg │ ├── smooth_quadratic.svg │ ├── smooth_cubic_bezier.svg │ └── cubic_bezier_method.svg ├── ch06 │ ├── two_squares.svg │ ├── scale_a.svg │ ├── unequal_scale.svg │ ├── translate_scale.svg │ ├── two_squares_with_outline.svg │ ├── rotation.svg │ ├── cartesian_original.svg │ ├── scale.svg │ ├── scale_translate.svg │ ├── cartesian_fixed.svg │ ├── scale_showing_grid.svg │ ├── scaled_rectangle.svg │ ├── rotate_center.svg │ ├── scale_around_center.svg │ ├── rotation_angle.svg │ └── skew_transform.svg ├── ch12 │ ├── linear_animateMotion.svg │ ├── simple_animation.svg │ ├── animate_values.svg │ ├── animate_color.svg │ ├── animate_transform.svg │ ├── mpath.svg │ ├── key_points.svg │ ├── animation_set.svg │ ├── sync_with_offset.svg │ ├── tied_animation.svg │ ├── additive_transform.svg │ ├── motion_along_path_1.svg │ ├── multiple_animation2.svg │ ├── sync_with_repetition.svg │ ├── animate_path_polygon.svg │ ├── motion_along_path_2.svg │ ├── multiple_animation.svg │ └── cat.svg ├── ch08 │ ├── simple_pattern.svg │ ├── linear_gradient.svg │ ├── stop_opacity.svg │ ├── pattern_viewbox.svg │ ├── radial_limits.svg │ ├── radial_focus.svg │ ├── three_stop_gradient.svg │ ├── three_stop_radial.svg │ ├── nested_patterns.svg │ ├── pattern_units_userspace.svg │ ├── pattern_units_boundingbox.svg │ ├── pattern_content_units.svg │ └── radial_spread_method.svg ├── ch13 │ ├── svg_link.svg │ ├── smil_event_animation.svg │ ├── basic_dom_example.svg │ ├── svg_css_link.svg │ ├── cat.svg │ └── simple_event.svg ├── appc │ ├── fig_c01.svg │ ├── fig_c02.svg │ └── fig_c03.svg └── change_doctype.pl ├── ch11 └── sky.jpg ├── callouts ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png └── 6.png ├── blog-examples ├── Strawberry.JPG ├── Strawberry-Blurred.JPG ├── Strawberry-blurred.JPG └── piechart-2004.xml ├── style.css ├── svg_style.css ├── template.html ├── ch13 ├── svg_link.svg ├── smil_event_animation.svg ├── files.txt ├── basic_dom_example.svg ├── svg_link.html ├── svg_css_link.svg ├── svg_css_link.html ├── cat.svg ├── simple_event.svg └── shirt_interact.html ├── ch07 ├── chapter7_examples.txt └── ch07_svg_template.html ├── ch03 ├── scaled_grid.svg └── ch03_grid_template.html ├── ch15 ├── KSJC.xml └── index.html ├── svg_template.html ├── ch05 ├── ch05_svg_nozoom_template.html └── ch05_svg_template.html ├── ch04 ├── ch04_svg_template.html └── ch04_grid_template.html ├── ch01 └── ch01_svg_template.html ├── converter.html ├── ch08 └── ch08_svg_template.html ├── ch12 └── ch12_svg_template.html ├── ch10 ├── minicat.svg └── index.html ├── ch06 └── ch06_grid_template.html └── fill_template.pl /static_figures/appd/ml.sh: -------------------------------------------------------------------------------- 1 | java -cp xercesImpl.jar:. MLtoSVG ${1}.ml > ${1}.svg 2 | 3 | -------------------------------------------------------------------------------- /ch11/sky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/ch11/sky.jpg -------------------------------------------------------------------------------- /callouts/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/callouts/1.png -------------------------------------------------------------------------------- /callouts/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/callouts/2.png -------------------------------------------------------------------------------- /callouts/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/callouts/3.png -------------------------------------------------------------------------------- /callouts/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/callouts/4.png -------------------------------------------------------------------------------- /callouts/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/callouts/5.png -------------------------------------------------------------------------------- /callouts/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/callouts/6.png -------------------------------------------------------------------------------- /blog-examples/Strawberry.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/blog-examples/Strawberry.JPG -------------------------------------------------------------------------------- /static_figures/ch02/cat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/ch02/cat.png -------------------------------------------------------------------------------- /static_figures/ch11/sky.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/ch11/sky.jpg -------------------------------------------------------------------------------- /static_figures/ch11/cloth.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/ch11/cloth.jpg -------------------------------------------------------------------------------- /static_figures/ch11/smiley.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/ch11/smiley.png -------------------------------------------------------------------------------- /static_figures/expander.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | for file 3 | do 4 | expand --tabs=2 $file > tmp 5 | mv tmp $file 6 | done 7 | 8 | -------------------------------------------------------------------------------- /static_figures/appd/MLtoSVG.class: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/appd/MLtoSVG.class -------------------------------------------------------------------------------- /static_figures/ch03/fig_3_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/ch03/fig_3_3.png -------------------------------------------------------------------------------- /static_figures/ch03/fig_3_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/ch03/fig_3_4.png -------------------------------------------------------------------------------- /static_figures/ch11/feBlend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/ch11/feBlend.png -------------------------------------------------------------------------------- /static_figures/ch15/icao_weather_station_codes.txt: -------------------------------------------------------------------------------- 1 | http://www.nws.noaa.gov/pub/stninfo/nsd_cccc.txt 2 | 3 | 4-letter ICAO codes 4 | -------------------------------------------------------------------------------- /static_figures/appd/xercesImpl.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/appd/xercesImpl.jar -------------------------------------------------------------------------------- /static_figures/appf/example_f02.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/appf/example_f02.pdf -------------------------------------------------------------------------------- /static_figures/ch05/kwanghwamun.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/ch05/kwanghwamun.jpg -------------------------------------------------------------------------------- /static_figures/ch10/kwanghwamun.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/ch10/kwanghwamun.jpg -------------------------------------------------------------------------------- /blog-examples/Strawberry-Blurred.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/blog-examples/Strawberry-Blurred.JPG -------------------------------------------------------------------------------- /blog-examples/Strawberry-blurred.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/blog-examples/Strawberry-blurred.JPG -------------------------------------------------------------------------------- /static_figures/appf/example_f02a.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/appf/example_f02a.pdf -------------------------------------------------------------------------------- /static_figures/ch15/TimeStampUtils.class: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/ch15/TimeStampUtils.class -------------------------------------------------------------------------------- /static_figures/ch03/default_coordinates.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/ch03/default_coordinates.png -------------------------------------------------------------------------------- /static_figures/appd/ParserErrorHandler.class: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oreillymedia/svg-essentials-examples/HEAD/static_figures/appd/ParserErrorHandler.class -------------------------------------------------------------------------------- /static_figures/appd/coord.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 3 6 | 7 | 8 | 5 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /static_figures/appd/coord3.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 3 6 | 7 | 8 | 5 9 | 10 | 11 | 1 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /static_figures/ch05/ext_style.css: -------------------------------------------------------------------------------- 1 | * { fill:none; stroke: black; } /* default for all elements */ 2 | 3 | rect { stroke-dasharray: 7 3; } 4 | 5 | circle.yellow { fill: yellow; } 6 | 7 | .thick { stroke-width: 5; } 8 | 9 | .semiblue { fill:blue; fill-opacity: 0.5; } 10 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Helvetica, Arial, sans-serif; 3 | } 4 | 5 | th { 6 | border-bottom: 1px solid gray; 7 | margin-bottom: 0.25em; 8 | } 9 | 10 | th, td { 11 | padding-right: 0.5em; 12 | } 13 | 14 | a { 15 | text-decoration: none; 16 | } 17 | 18 | -------------------------------------------------------------------------------- /static_figures/appd/coord2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | test 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 3 12 | 13 | 14 | 5 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /static_figures/appf/design.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /static_figures/appd/generic_transformation.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | a 7 | c 8 | e 9 | 10 | 11 | b 12 | d 13 | f 14 | 15 | 16 | 0 17 | 0 18 | 1 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /static_figures/ch01/cat_eyes.svg: -------------------------------------------------------------------------------- 1 | 3 | Cat 4 | Stick Figure of a Cat 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /static_figures/ch01/cat_circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 7 | Cat 8 | Stick Figure of a Cat 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /static_figures/ch04/unfilled_star.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | Unfilled Star 8 | 9 | 11 | 12 | -------------------------------------------------------------------------------- /static_figures/ch05/priority.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /svg_style.css: -------------------------------------------------------------------------------- 1 | #svgSource { 2 | font-size: 10pt; 3 | } 4 | 5 | #svgOriginal { 6 | display: none; 7 | } 8 | 9 | #svgError { 10 | display: none; 11 | margin: 0.5em 0; 12 | background-color: #fcc; 13 | } 14 | 15 | #svgShowError { 16 | display: none; 17 | } 18 | 19 | .highlight { 20 | background-color: #cfc; 21 | font-weight: bold; 22 | } 23 | 24 | .editable { 25 | border: 2px solid #080; 26 | padding: 0.25em; 27 | } 28 | -------------------------------------------------------------------------------- /static_figures/appd/temperatures.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 22.3 6 | 26 7 | 27.2 8 | 24.8 9 | 28 10 | 25 11 | 28.2 12 | 13 | 14 | 30.3 15 | 30.4 16 | 28 17 | 26.4 18 | 29.9 19 | 27.2 20 | 26 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /template.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | Put a Title Here 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /static_figures/ch04/line_example.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /static_figures/appd/scalar_mult.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 4 | 5 | • 6 | 7 | 8 | 9 | 3 10 | 2 11 | 12 | 13 | 5 14 | 6 15 | 16 | 17 | 18 | = 19 | 20 | 21 | 22 | 15 23 | 10 24 | 25 | 26 | 25 27 | 30 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /static_figures/appd/simple_translate.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | x 6 | 7 | 8 | y 9 | 10 | 11 | + 12 | 13 | 14 | 7 15 | 16 | 17 | 2 18 | 19 | 20 | 21 | = 22 | 23 | 24 | 25 | x+7 26 | 27 | 28 | y+2 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /static_figures/ch04/filling_polygons_example.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | Unfilled Star 9 | 10 | 12 | 13 | -------------------------------------------------------------------------------- /static_figures/ch09/text_glyphs.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 7 | 8 | glyphs 9 | glyphs 10 | 11 | -------------------------------------------------------------------------------- /static_figures/ch07/plain_marker.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Lines and arc 7 | Lines and an arc with no markers 8 | 9 | 10 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /static_figures/ch06/two_squares.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /static_figures/ch11/makecurve.pl: -------------------------------------------------------------------------------- 1 | #!/usr/bin/perl 2 | 3 | if (!$ARGV[0]) { 4 | print STDERR "Usage: $0 exponent\n"; 5 | } 6 | else { 7 | $exponent = $ARGV[0]; 8 | 9 | print "\n!; 21 | } 22 | 23 | 24 | -------------------------------------------------------------------------------- /static_figures/ch09/tspan_multi.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Multiple horizontal and vertical offsets 7 | 8 | It’s 9 | shaken, 11 | not stirred. 12 | 13 | 14 | -------------------------------------------------------------------------------- /static_figures/ch09/tspan_style.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Styles changed with tspan 7 | 8 | Switch among 9 | italic, normal, 10 | and bold text. 11 | 12 | 13 | -------------------------------------------------------------------------------- /static_figures/ch09/tspan_offset.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | Vertical positioning with dy 8 | 9 | F a 10 | l 11 | l 12 | 13 | 14 | -------------------------------------------------------------------------------- /static_figures/ch04/polyline_example.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | polyline 8 | Symbol for a resistor drawn with polyline element 9 | 10 | 14 | 15 | -------------------------------------------------------------------------------- /static_figures/ch12/linear_animateMotion.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Animation Along a Linear Path 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /static_figures/ch09/vertical_text.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Vertical text 7 | 8 | Rotated 90 9 | Writing Mode tb 10 | Vertical zero 12 | 13 | 14 | -------------------------------------------------------------------------------- /static_figures/ch01/cat_whiskers.svg: -------------------------------------------------------------------------------- 1 | 3 | Cat 4 | Stick Figure of a Cat 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /static_figures/ch12/simple_animation.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Simple Animation 7 | 8 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /static_figures/ch12/animate_values.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Animating Values 7 | Animate through a specific set of values 8 | 9 | 11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /static_figures/ch04/filled_polyline_example.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | Filled polyline 8 | Symbol for a resistor drawn with polyline element, 9 | with fill not turned off. 10 | 11 | 15 | 16 | -------------------------------------------------------------------------------- /static_figures/ch04/filled_polyline_figure.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | Filled polyline 8 | Symbol for a resistor drawn with polyline element, 9 | with fill not turned off. 10 | 11 | 15 | 16 | -------------------------------------------------------------------------------- /static_figures/appf/example_f01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | SVG Example 8 | 9 |

10 | Behold SVG mixed with XHTML. 11 |

12 | 13 | 15 | 16 |

17 | More XHTML 18 |

19 | 20 | 21 | -------------------------------------------------------------------------------- /static_figures/ch08/simple_pattern.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Path for a Pattern Tile 7 | Cubic Bézier curve in a rectangle. 8 | 9 | 11 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /static_figures/ch03/units_on_svg.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | Units in SVG element but not in shape 9 | 10 | 12 | 13 | 14 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /static_figures/ch06/scale_a.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | Scaling a Square Uniformly 8 | This diagram shows the square and its scaled 9 | counterpart, without a grid. 10 | 11 | 12 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /static_figures/ch12/animate_color.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Animating Color 7 | 8 | 10 | 12 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /static_figures/ch09/text_anchor.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Result of using text-anchor 7 | 8 | 9 | 10 | Start 11 | Middle 12 | End 13 | 14 | 15 | -------------------------------------------------------------------------------- /ch13/svg_link.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | 9 | Cat 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /static_figures/appd/coord.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 3 8 | 5 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /static_figures/ch06/unequal_scale.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | Non-uniform Scaling 8 | Shows a square tripled in width and multiplied by 9 | one and a half in height. 10 | 11 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /static_figures/ch12/animate_transform.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Animating a transform attribute 7 | 8 | 10 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /static_figures/ch04/polygon_fill_rule_example.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | Effect of fillrule 8 | Shows a star filled with nonzero and evenodd values 9 | 10 | 12 | 13 | 15 | 16 | -------------------------------------------------------------------------------- /static_figures/ch13/svg_link.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | 9 | Cat 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /static_figures/ch03/default_coordinates.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | Default User Coordinates 8 | Shows a rectangle on a grid in default user coordinates 9 | 10 | 12 | 13 | 14 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /static_figures/ch06/translate_scale.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Sequence of Transformations 7 | Shows an object translated and then scaled. 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | -------------------------------------------------------------------------------- /static_figures/ch09/tspan_positioning.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Absolutely positioned poetry 7 | 8 | 9 | They dined on mince, and slices of quince, 10 | Which they ate with a 11 | runcible spoon; 12 | And hand in hand, on the edge 13 | of the sand, 14 | They danced by the light of the moon. 15 | 16 | 17 | -------------------------------------------------------------------------------- /ch07/chapter7_examples.txt: -------------------------------------------------------------------------------- 1 | template:: ch07/ch07_svg_template.html 2 | output:: ch07/moveto-lineto.html 3 | title:: moveto and lineto 4 | dimensions:: width="150" height="150" viewBox="0 0 150 150" 5 | markup:: 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | !fill 21 | #===================================== 22 | 23 | -------------------------------------------------------------------------------- /static_figures/appd/simple_scale.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 3 6 | 0 7 | 8 | 9 | 0 10 | 1.5 11 | 12 | 13 | • 14 | 15 | 16 | x 17 | 18 | 19 | y 20 | 21 | 22 | 23 | = 24 | 25 | 26 | 3·x + 0·y 27 | 28 | 29 | 0·x + 1.5·y 30 | 31 | 32 | = 33 | 34 | 35 | 3x 36 | 37 | 38 | 1.5y 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /static_figures/ch07/all_circular_markers.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | Using a single marker for all vertices 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | -------------------------------------------------------------------------------- /static_figures/ch06/two_squares_with_outline.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /static_figures/ch09/custom_font.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | Korean syllables from an external font 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 19 | 서울 - 대한민국 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /static_figures/ch09/text_placement.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Text placement and outlining 7 | 8 | 9 | 11 | 12 | Simplest Text 13 | Outlined/filled 14 | Outlined only 16 | 17 | -------------------------------------------------------------------------------- /static_figures/ch01/cat_transform.svg: -------------------------------------------------------------------------------- 1 | 4 | Cat 5 | Stick Figure of a Cat 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /static_figures/ch09/vertical_text_2.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Vertical text 7 | 8 | Rotated 90 9 | Writing Mode tb 10 | Vertical zero 12 | Vertical zero 14 | 15 | 16 | -------------------------------------------------------------------------------- /static_figures/ch03/using_viewbox_b.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | Explicit units in shape element 9 | Shows the coordinate grid in pixels and a rectangle 10 | with units in millimeters. 11 | 12 | 14 | 15 | 16 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /static_figures/ch05/internal_stylesheets.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /static_figures/ch08/linear_gradient.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | Simple two-color gradient 8 | Gradient from yellow to cyan; stops are at the ends. 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 19 | 20 | -------------------------------------------------------------------------------- /static_figures/ch03/explicit_units.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | Explicit units in shape element 9 | Shows the coordinate grid in pixels and a rectangle 10 | with units in millimeters. 11 | 12 | 14 | 15 | 16 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /static_figures/ch04/basic_lines_example.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | Demonstration of simple lines 8 | Draws a horizontal, vertical, and diagonal line. 9 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /static_figures/ch05/external_stylesheets.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 8 | 9 | References to an external stylesheet 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | -------------------------------------------------------------------------------- /static_figures/ch09/baseline_shift.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Subscripts and superscripts 7 | 8 | 9 | C12 10 | H22 11 | O11 (sugar) 12 | 13 | 14 | 15 | 6.02 x 1023 16 | (Avogadro's number) 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /static_figures/appd/coord3.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 3 8 | 5 9 | 1 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /static_figures/ch07/closepath_differ.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Result of using moveto and lineto 7 | Simple use of the moveto and lineto commands in a 8 | path 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /static_figures/appd/color_matrix2.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 0 6 | 0 7 | 0 8 | 0 9 | 0 10 | 11 | 12 | 13 | 0 14 | 0 15 | 0 16 | 0.9 17 | 0 18 | 19 | 20 | 0 21 | 0 22 | 0 23 | 0.9 24 | 0 25 | 26 | 27 | 28 | 0 29 | 0 30 | 0 31 | 1 32 | 0 33 | 34 | 35 | 36 | 0 37 | 0 38 | 0 39 | 0 40 | 1 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /static_figures/ch06/rotation.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Result of rotation around the origin 7 | Shows a square in normal position, then 8 | rotated 45 degrees about the origin. 9 | 10 | 11 | 12 | 13 | 14 | 15 | ; 17 | 18 | -------------------------------------------------------------------------------- /static_figures/ch08/stop_opacity.svg: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | -------------------------------------------------------------------------------- /static_figures/ch10/unmasked_graphic.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 8 | Unmasked image 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | -------------------------------------------------------------------------------- /static_figures/appc/fig_c01.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 9 | 11 | 12 | 13 | 14 | 15 | 16 | currentWidth 17 | 18 | 19 | 20 | 21 | message 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /static_figures/ch06/cartesian_original.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Direct use of Cartesian Coordinates 7 | Shows a trapezoid displayed in SVG, with unconverted 8 | Cartesian coordinates. Trapezoid appears upside-down. 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | -------------------------------------------------------------------------------- /static_figures/ch03/using_viewbox.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | Units in SVG element and in shape 9 | 10 | SVG element has width/height set in centimeters; 11 | the scaling is in 16 units per centimeter. 12 | 13 | 15 | 17 | 19 | 20 | -------------------------------------------------------------------------------- /static_figures/ch08/pattern_viewbox.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Pattern scaled with viewBox 7 | 8 | 9 | 13 | 15 | 16 | 17 | 18 | 20 | 21 | -------------------------------------------------------------------------------- /static_figures/ch08/radial_limits.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | Setting limits for a radial gradient 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 20 | 21 | -------------------------------------------------------------------------------- /static_figures/ch12/mpath.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | Animation Along a Complex Path using mPath 8 | 9 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /ch03/scaled_grid.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | Scaled Grid 8 | 9 | 10 | 11 | 15 | 16 | 17 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /static_figures/ch03/scaled_grid.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | Scaled Grid 6 | 7 | 8 | 9 | 13 | 14 | 15 | 16 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /static_figures/ch06/scale.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | Uniform Scaling (with Guidelines) 8 | Shows a square doubled uniformly in width/height 9 | with guidelines to show canvas boundaries 10 | 11 | 13 | 14 | 15 | 17 | 18 | -------------------------------------------------------------------------------- /static_figures/ch01/graph_paper.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | Graph Paper 8 | 9 | 14 | 15 | 16 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /static_figures/ch07/circular_marker.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Correctly placed circular marker 7 | Line with correctly placed start marker. 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /static_figures/ch07/moveto_lineto.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Result of using moveto and lineto 7 | Simple use of the moveto and lineto commands in a 8 | path 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /static_figures/ch07/path_shortcuts.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Result of drawing a diamond with a path 7 | Drawing a diamond by many different paths 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /static_figures/ch06/scale_translate.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Sequence of Transformations 7 | Shows an object scaled and then translated. 8 | 9 | 10 | 11 | 12 | 13 | 15 | 16 | 19 | 20 | -------------------------------------------------------------------------------- /static_figures/ch07/bad_circular_marker.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | Misplaced circular marker 8 | Line with misplaced start marker. 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /static_figures/ch12/key_points.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Animation using key points and key times 7 | 8 | 10 | 11 | 12 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /static_figures/ch04/stroke_width_example.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | stroke-width 8 | Draws a horizontal, vertical, and diagonal line with 9 | double-thickness lines. 10 | 11 | 12 | 14 | 15 | 17 | 18 | 20 | 21 | -------------------------------------------------------------------------------- /static_figures/ch12/animation_set.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Using the set element 7 | Animate through a specific set of values 8 | 9 | 10 | 12 | 13 | 14 | 15 | 17 | All gone! 18 | 19 | 20 | -------------------------------------------------------------------------------- /static_figures/ch04/circles_ellipses_figure.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | Circles and Ellipses 8 | Displays two circles and two ellipses. 9 | One ellipse is longer horizontally, the other is 10 | taller vertically. 11 | 12 | 13 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /static_figures/ch04/stroke_opacity_example.svg: -------------------------------------------------------------------------------- 1 | 3 | 5 | 7 | 9 | 11 | 13 | 15 | 16 | -------------------------------------------------------------------------------- /static_figures/ch06/cartesian_fixed.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Transformed Cartesian Coordinates 7 | Shows a trapezoid displayed in SVG, with transformed 8 | Cartesian coordinates. Trapezoid appears right-side-up. 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /static_figures/ch03/using_viewbox_a.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 8 | 9 | House 10 | Using ViewBox to set 16 units per centimeter 11 | 12 | 13 | 15 | 16 | 18 | 19 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /static_figures/ch03/using_viewbox_nogrid.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | House 9 | Using ViewBox to set 16 units per centimeter 10 | 11 | 12 | 14 | 15 | 17 | 18 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /static_figures/ch08/radial_focus.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | Setting focal point for a radial gradient 9 | 10 | 11 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | -------------------------------------------------------------------------------- /static_figures/ch12/sync_with_offset.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Synchronization of Animations 7 | Tie the beginning of second animation to end of first 8 | 9 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /static_figures/ch12/tied_animation.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Synchronization of Animations 7 | Tie the beginning of second animation to end of first 8 | 9 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /blog-examples/piechart-2004.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 99 16 | 17 | -------------------------------------------------------------------------------- /static_figures/ch07/generic_bezier.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | How graphics programs draw Bézier curves 7 | Diagram showing how most drawing programs create 8 | Bezier curves. 9 | 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /static_figures/ch04/basic_lines_figure.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | Line example 8 | Draws a horizontal, vertical, and diagonal line 9 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /ch13/smil_event_animation.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | 10 | Start 12 | 13 | 14 | 15 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /static_figures/appd/scale_translate1.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 1 6 | 0 7 | tx 8 | 9 | 10 | 0 11 | 1 12 | ty 13 | 14 | 15 | 0 16 | 0 17 | 1 18 | 19 | 20 | 21 | • 22 | 23 | 24 | 25 | sx 26 | 0 27 | 0 28 | 29 | 30 | 0 31 | sy 32 | 0 33 | 34 | 35 | 0 36 | 0 37 | 1 38 | 39 | 40 | 41 | • 42 | 43 | 44 | 45 | 3 46 | 47 | 48 | 5 49 | 50 | 51 | 1 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /static_figures/ch03/nested_viewport.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Demonstration of nested viewports 7 | 8 | Show an <svg> element nested inside another one, both 9 | of which have viewBox attributes. 10 | 11 | 12 | 14 | 15 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /static_figures/ch07/closepath.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Result of using moveto and lineto 7 | Simple use of the moveto and lineto commands in a 8 | path 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /static_figures/ch08/three_stop_gradient.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | Three-stop gradient 9 | Gradient from yellow to cyan, with magenta in at the 10 | one-third mark. 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | -------------------------------------------------------------------------------- /static_figures/ch13/smil_event_animation.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | 10 | Start 12 | 13 | 14 | 15 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /static_figures/ch04/line_figure.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | Line example 8 | Draws a horizontal, vertical, and diagonal line 9 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /static_figures/ch12/additive_transform.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Example of Multiple animateTransform elements 7 | 8 | 10 | 13 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /static_figures/ch12/motion_along_path_1.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Animation Along a Complex Path 7 | 8 | 10 | 11 | 14 | 15 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /static_figures/ch08/three_stop_radial.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | preserveAspectRatio="xMinYMin meet"> 8 | 9 | Radial gradient with three stops 10 | Stops at 0%, 50%, and 100%, in red, green, purple 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | -------------------------------------------------------------------------------- /static_figures/ch05/image_element.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 26 | 27 | -------------------------------------------------------------------------------- /static_figures/ch06/scale_showing_grid.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | How Uniform Scaling Works 8 | Shows a square doubled uniformly in width/height 9 | with grid lines. 10 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /static_figures/ch11/background_image.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /static_figures/ch12/multiple_animation2.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Simple Animation of Multiple Objects 7 | 9 | 11 | 13 | 14 | 15 | 16 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /static_figures/ch04/linejoin_example.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | stroke-linejoin 7 | Shows lines with stroke-linejoin's various values. 8 | 9 | 13 | 14 | 18 | 19 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /static_figures/ch12/sync_with_repetition.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Synchronization of Animations 7 | Tie the beginning of second animation to end of first 8 | 10 | 13 | 14 | 15 | 17 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /static_figures/ch12/animate_path_polygon.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Animating Paths and Polygons 7 | 8 | 10 | 15 | 16 | 17 | 19 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /static_figures/ch12/motion_along_path_2.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Animation Along a Complex Path with Auto-Rotation 7 | 8 | 10 | 11 | 14 | 15 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ch13/files.txt: -------------------------------------------------------------------------------- 1 | iframe::http://langintro.com/svgess2/ch13/anim_css_link.svg[width="100%", height="150px"] 2 | iframe::http://langintro.com/svgess2/ch13/basic_dom.svg[width="100%", height="150px"] 3 | iframe::http://langintro.com/svgess2/ch13/drag_objects.svg[width="100%", height="250px"] 4 | iframe::http://langintro.com/svgess2/ch13/shirt1.svg[width="100%", height="250px"] 5 | iframe::http://langintro.com/svgess2/ch13/shirt_create.html[width="100%", height="400px"] 6 | iframe::http://langintro.com/svgess2/ch13/shirt_interact.html[width="100%", height="400px"] 7 | iframe::http://langintro.com/svgess2/ch13/simple_event.svg[width="100%", height="150px"] 8 | iframe::http://langintro.com/svgess2/ch13/smil_event_animation.svg[width="100%", height="150px"] 9 | iframe::http://langintro.com/svgess2/ch13/svg_css_link.svg[width="100%", height="150px"] 10 | iframe::http://langintro.com/svgess2/ch13/svg_link.svg[width="100%", height="150px"] 11 | -------------------------------------------------------------------------------- /static_figures/ch11/drop_shadow_text.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 8 | 9 | Drop shadow applied to text 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 25 | SpringFlower 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /static_figures/ch01/cat_other_shapes.svg: -------------------------------------------------------------------------------- 1 | 4 | Cat 5 | Stick Figure of a Cat 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 21 | 22 | -------------------------------------------------------------------------------- /static_figures/appc/fig_c02.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 9 | 11 | 12 | 13 | 14 | 15 | 16 | currentWidth 17 | 32 19 | 20 | 21 | 22 | 23 | message 24 | I love SVG. 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /static_figures/ch11/background_image_adapted.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 20 | 21 | 23 | 24 | -------------------------------------------------------------------------------- /static_figures/ch12/multiple_animation.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Multiple Animations of a Single Object 7 | 9 | 11 | 13 | 15 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /static_figures/ch06/scaled_rectangle.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | When Scaling Occurs 8 | Shows that the coordinate system is transformed 9 | before the object is scaled. 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | -------------------------------------------------------------------------------- /static_figures/appd/scale_translate2.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 1 6 | 0 7 | tx 8 | 9 | 10 | 0 11 | 1 12 | ty 13 | 14 | 15 | 0 16 | 0 17 | 1 18 | 19 | 20 | 21 | • 22 | 23 | 24 | 25 | sx 26 | 0 27 | 0 28 | 29 | 30 | 0 31 | sy 32 | 0 33 | 34 | 35 | 0 36 | 0 37 | 1 38 | 39 | 40 | 41 | = 42 | 43 | 44 | 45 | sx 46 | 0 47 | tx 48 | 49 | 50 | 0 51 | sy 52 | ty 53 | 54 | 55 | 0 56 | 0 57 | 1 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /static_figures/ch10/clip_path.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 8 | Simple rectangular clipping 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /static_figures/ch08/nested_patterns.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Nested Patterns 7 | Pattern of circles, each of which contains horizontal stripes 8 | 9 | 10 | 13 | 15 | 16 | 17 | 20 | 22 | 23 | 24 | 25 | 27 | 28 | -------------------------------------------------------------------------------- /static_figures/ch08/pattern_units_userspace.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Tiles spaced by userSpaceOnUse 7 | 8 | 9 | 11 | 13 | 15 | 16 | 17 | 18 | 20 | 22 | 24 | 25 | -------------------------------------------------------------------------------- /static_figures/change_doctype.pl: -------------------------------------------------------------------------------- 1 | #!/usr/bin/perl 2 | 3 | use File::Find; 4 | 5 | find(\&changetype, "."); 6 | 7 | sub changetype 8 | { 9 | my $data; 10 | my $filename = $_; 11 | if ($filename =~ m/\.svg$/) { 12 | print STDERR "Analyzing $filename\n"; 13 | open OUTFILE, ">/tmp/temp.svg"; 14 | open INFILE, $filename; 15 | while ($data = ) { 16 | $data =~ s!PUBLIC "-//W3C//DTD SVG 1.0//EN"!PUBLIC "-//W3C//DTD SVG 1.1//EN"!; 17 | $data =~ s! "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"!"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"!; 18 | $data =~ s!PUBLIC "-//W3C//DTD SVG 20001102//EN"!PUBLIC "-//W3C//DTD SVG 1.1//EN"!; 19 | $data =~ s!"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"! "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"!; 20 | 21 | print OUTFILE $data; 22 | } 23 | close INFILE; 24 | close OUTFILE; 25 | system("mv /tmp/temp.svg $filename"); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /static_figures/appd/multiply3.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 1 6 | 2 7 | 3 8 | 9 | 10 | 4 11 | 5 12 | 6 13 | 14 | 15 | • 16 | 17 | 18 | 7 19 | 10 20 | 21 | 22 | 8 23 | 11 24 | 25 | 26 | 9 27 | 12 28 | 29 | 30 | 31 | = 32 | 33 | 34 | 1·7 + 2·8 + 3·9 35 | 1·10 + 2·11 + 3·12 36 | 37 | 38 | 4·7 + 5·8 + 6·9 39 | 4·10 + 5·11 + 6·12 40 | 41 | 42 | = 43 | 44 | 45 | 50 46 | 68 47 | 48 | 49 | 122 50 | 167 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /static_figures/ch08/pattern_units_boundingbox.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Tiles spaced by objectBoundingBox 7 | 8 | 9 | 11 | 13 | 15 | 16 | 17 | 18 | 20 | 22 | 24 | 25 | -------------------------------------------------------------------------------- /ch13/basic_dom_example.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | Accessing Content in SVG 9 | 10 | 12 | 13 | 14 | 24 | 25 | -------------------------------------------------------------------------------- /static_figures/appd/translate.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 1 6 | 0 7 | tx 8 | 9 | 10 | 0 11 | 1 12 | ty 13 | 14 | 15 | 0 16 | 0 17 | 1 18 | 19 | 20 | • 21 | 22 | 23 | 3 24 | 25 | 26 | 5 27 | 28 | 29 | 1 30 | 31 | 32 | 33 | = 34 | 35 | 36 | 37 | 1·3 + 0·5 + tx·1 38 | 39 | 40 | 0·3 + 1·5 + ty·1 41 | 42 | 43 | 0·3 + 0·5 + 1·1 44 | 45 | 46 | 47 | = 48 | 49 | 50 | 51 | 3 + tx 52 | 53 | 54 | 5 + ty 55 | 56 | 57 | 1 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /static_figures/ch04/linecap_example.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | stroke-linecap 7 | Shows lines with stroke-linecap's various values. 8 | 9 | 11 | 13 | 14 | 16 | 17 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /static_figures/ch09/bidirectional_text.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Multilingual text 7 | 8 | 9 | 10 | Greek: 11 | 12 | αβγδε 13 | 14 | 15 | Russian: 16 | 17 | абвгд 18 | 19 | 20 | Hebrew: 21 | 22 | אבגדה (written right to left) 23 | 24 | 25 | Arabic: 26 | 27 | ا ب ج د(written right to left) 28 | 29 | 30 | 31 | This is 32 | right-to-left 34 | text. 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /static_figures/appd/add_matrix.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 1 6 | 2 7 | 8 | 9 | 3 10 | 4 11 | 12 | 13 | 5 14 | 6 15 | 16 | 17 | + 18 | 19 | 20 | 7 21 | 8 22 | 23 | 24 | 9 25 | 10 26 | 27 | 28 | 11 29 | 12 30 | 31 | 32 | = 33 | 34 | 35 | 1+7 36 | 2+8 37 | 38 | 39 | 3+9 40 | 4+10 41 | 42 | 43 | 5+11 44 | 6+12 45 | 46 | 47 | = 48 | 49 | 50 | 8 51 | 10 52 | 53 | 54 | 12 55 | 14 56 | 57 | 58 | 16 59 | 18 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /static_figures/ch04/polygon_example.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | preserveAspectRatio="xMinYMin meet"> 8 | 9 | Polygons 10 | Displays a parallelogram, star, and odd-shaped polygon. 11 | 12 | 13 | 15 | 16 | 17 | 22 | 23 | 24 | 28 | 29 | -------------------------------------------------------------------------------- /static_figures/appd/pre_multiply.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 1 6 | 2 7 | 3 8 | 9 | 10 | 4 11 | 5 12 | 6 13 | 14 | 15 | • 16 | 17 | 18 | 7 19 | 10 20 | 21 | 22 | 8 23 | 11 24 | 25 | 26 | 9 27 | 12 28 | 29 | 30 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /static_figures/appd/scale_translate3.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | sx 6 | 0 7 | tx 8 | 9 | 10 | 0 11 | sy 12 | ty 13 | 14 | 15 | 0 16 | 0 17 | 1 18 | 19 | 20 | • 21 | 22 | 23 | 3 24 | 25 | 26 | 5 27 | 28 | 29 | 1 30 | 31 | 32 | 33 | = 34 | 35 | 36 | 37 | sx·3 + 0·5 + tx·1 38 | 39 | 40 | 0·3 + sy·5 + ty·1 41 | 42 | 43 | 0·3 + 0·5 + 1·1 44 | 45 | 46 | 47 | = 48 | 49 | 50 | 51 | sx·3 + tx 52 | 53 | 54 | sy·5 + ty 55 | 56 | 57 | 1 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /static_figures/ch06/rotate_center.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | Result of rotation around a center point 8 | Shows a circle as a center, then several 9 | arrows rotated around that point. 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /static_figures/ch13/basic_dom_example.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | Accessing Content in SVG 9 | 10 | 12 | 13 | 14 | 24 | 25 | -------------------------------------------------------------------------------- /static_figures/appd/color_matrix.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | a0 6 | a1 7 | a2 8 | a3 9 | a4 10 | 11 | 12 | 13 | a5 14 | a6 15 | a7 16 | a8 17 | a9 18 | 19 | 20 | a10 21 | a11 22 | a12 23 | a13 24 | a14 25 | 26 | 27 | 28 | a15 29 | a16 30 | a17 31 | a18 32 | a19 33 | 34 | 35 | 36 | 0 37 | 0 38 | 0 39 | 0 40 | 1 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /static_figures/ch09/textlength.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Effects of varying textLength and lengthAdjust 7 | 8 | 9 | 10 | Two words 12 | Two words 14 | 15 | Two words 16 | (normal length) 17 | 18 | 19 | Two words 21 | Two words 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /ch13/svg_link.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | Links in SVG 9 | 10 | 11 | 12 | 13 |
14 | 17 | 18 | Cat 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /static_figures/appd/scale.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | sx 6 | 0 7 | 0 8 | 9 | 10 | 11 | 0 12 | sy 13 | 0 14 | 15 | 16 | 17 | 0 18 | 0 19 | 1 20 | 21 | 22 | 23 | 24 | • 25 | 26 | 27 | 28 | 3 29 | 30 | 31 | 5 32 | 33 | 34 | 1 35 | 36 | 37 | 38 | = 39 | 40 | 41 | 42 | sx·3 + 0·5 + 0·1 43 | 44 | 45 | 0·3 + sy·5 + 0·1 46 | 47 | 48 | 0·3 + 0·5 + 1·1 49 | 50 | 51 | 52 | = 53 | 54 | 55 | 56 | sx·3 57 | 58 | 59 | sy·5 60 | 61 | 62 | 1 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /static_figures/ch06/scale_around_center.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | Result of scaling around a center point 8 | Shows a series of concentric squares. 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 20 | 22 | 24 | 25 | -------------------------------------------------------------------------------- /static_figures/ch09/switch_language.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Use of switch element 7 | 8 | 9 | 10 | 11 | 12 | A circle 13 | without colour. 14 | 15 | 16 | A circle 17 | without color. 18 | 19 | 20 | Un círculo 21 | sin color. 22 | 23 | 24 | Круг 25 | без света. 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /static_figures/appd/multiply1.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 1 6 | 2 7 | 3 8 | 9 | 10 | 4 11 | 5 12 | 6 13 | 14 | 15 | • 16 | 17 | 18 | 7 19 | 10 20 | 21 | 22 | 8 23 | 11 24 | 25 | 26 | 9 27 | 12 28 | 29 | 30 | 31 | = 32 | 33 | 34 | 1·7 + 2·8 + 3·9 35 | - 36 | 37 | 38 | - 39 | - 40 | 41 | 42 | = 43 | 44 | 45 | 50 46 | - 47 | 48 | 49 | - 50 | - 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /ch13/svg_css_link.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | 20 | 21 | 22 | Cat 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /static_figures/ch04/circles_ellipses.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | Circles and Ellipses 9 | Displays two circles and two ellipses on a background grid. 10 | One ellipse is longer horizontally, the other is 11 | taller vertically. 12 | 13 | 15 | 16 | 17 | 19 | 20 | 22 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /static_figures/ch04/rounded_rectangle_example.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | Rounded Rectangles 8 | Displays several rect elements with varying 9 | values of rx and ry. 10 | 11 | 12 | 14 | 15 | 17 | 18 | 20 | 21 | 22 | 24 | 25 | 27 | 28 | -------------------------------------------------------------------------------- /static_figures/ch01/cat_paths.svg: -------------------------------------------------------------------------------- 1 | 4 | Cat 5 | Stick Figure of a Cat 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 21 | 22 | 24 | 25 | -------------------------------------------------------------------------------- /static_figures/ch01/vector_graphic.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 8 | Pixel Graphics 9 | 10 | 11 | 13 | 14 | 16 | 17 | 18 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /static_figures/ch13/svg_css_link.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | 20 | 21 | 22 | Cat 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /static_figures/appd/other_transformations.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | cos(a) 7 | -sin(a) 8 | 0 9 | 10 | 11 | sin(a) 12 | cos(a) 13 | 0 14 | 15 | 16 | 0 17 | 0 18 | 1 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 1 28 | tan(ax) 29 | 0 30 | 31 | 32 | 0 33 | 1 34 | 0 35 | 36 | 37 | 0 38 | 0 39 | 1 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 1 49 | 0 50 | 0 51 | 52 | 53 | tan(ay) 54 | 1 55 | 0 56 | 57 | 58 | 0 59 | 0 60 | 1 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /static_figures/ch04/stroke_color.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | Stroke color 8 | Draws lines using a variety of methods for representing 9 | stroke color. 10 | 11 | 13 | 14 | 15 | 17 | 18 | 19 | 21 | 22 | 23 | 25 | 26 | 27 | 29 | 30 | -------------------------------------------------------------------------------- /static_figures/ch09/text_attributes.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Text weight, style, decoration, and spacing 7 | 8 | bold 9 | italic 10 | under 11 | over 12 | through 14 | more word space 15 | less word space 16 | wide letter space 17 | narrow letter space 18 | 19 | 20 | -------------------------------------------------------------------------------- /static_figures/appd/multiply2.ml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 1 6 | 2 7 | 3 8 | 9 | 10 | 4 11 | 5 12 | 6 13 | 14 | 15 | • 16 | 17 | 18 | 7 19 | 10 20 | 21 | 22 | 8 23 | 11 24 | 25 | 26 | 9 27 | 12 28 | 29 | 30 | 31 | = 32 | 33 | 34 | 1·7 + 2·8 + 3·9 35 | - 36 | 37 | 38 | 4·7 + 5·8 + 6·9 39 | - 40 | 41 | 42 | = 43 | 44 | 45 | 50 46 | - 47 | 48 | 49 | 122 50 | - 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /static_figures/ch07/arc_path.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Using elliptical arc 7 | Drawing the Korean national symbol (yin-yang) with 8 | a series of ellipses and elliptical arcs 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /ch15/KSJC.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | NOAA's National Weather Service 5 | http://weather.gov/ 6 | San Jose International Airport, CA 7 | KSJC 8 | 37.37 9 | -121.93 10 | Last Updated on Jul 15 2014, 7:53 am PDT 11 | 12 | Tue, 15 Jul 2014 07:53:00 -0700 13 | 14 | Overcast 15 | 62.0 F (16.7 C) 16 | 62.0 17 | 16.7 18 | West at 5.8 MPH (5 KT) 19 | West 20 | 290 21 | 5.8 22 | 10.00 23 | http://weather.gov/disclaimer.html 24 | 25 | -------------------------------------------------------------------------------- /static_figures/ch05/fig_0408test.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 9 | 10 | 11 | 12 | 13 | 18 | 21 | 22 | 31 | 32 | -------------------------------------------------------------------------------- /static_figures/ch15/KSJC.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | NOAA's National Weather Service 5 | http://weather.gov/ 6 | San Jose International Airport, CA 7 | KSJC 8 | 37.37 9 | -121.93 10 | Last Updated on Jul 15 2014, 7:53 am PDT 11 | 12 | Tue, 15 Jul 2014 07:53:00 -0700 13 | 14 | Overcast 15 | 62.0 F (16.7 C) 16 | 62.0 17 | 16.7 18 | West at 5.8 MPH (5 KT) 19 | West 20 | 290 21 | 5.8 22 | 10.00 23 | http://weather.gov/disclaimer.html 24 | 25 | -------------------------------------------------------------------------------- /svg_template.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | SVG Template 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | 18 |
19 |
20 | 21 | 22 | 23 |
24 | 25 |
26 | 27 |
28 | 29 | 30 | 31 | 32 |
33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /static_figures/ch04/stroke_opacity.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | Stroke Opacity 7 | Shows the same line at varying degrees of opacity. 8 | 9 | 11 | 13 | 15 | 17 | 19 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /static_figures/ch05/fig_0113.svg: -------------------------------------------------------------------------------- 1 | 4 | Cat 5 | Stick Figure of a Cat 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 21 | 22 | 24 | 25 | -------------------------------------------------------------------------------- /ch05/ch05_svg_nozoom_template.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | $title 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 

16 | 
$markup

17 | 

18 | 

19 |   
20 |   
21 |    
22 | 

23 | 
 
24 | 
25 | 

26 |   
27 |     
28 |   
29 | 

30 | 
31 | 
32 | 
33 | 


--------------------------------------------------------------------------------
/static_figures/ch15/TimeStampUtils.java:
--------------------------------------------------------------------------------
 1 | import java.util.Calendar;
 2 | import java.util.Date;
 3 | import java.text.DateFormat;
 4 | 
 5 | public class TimeStampUtils
 6 | {
 7 |     public static String getDate(String timeStampString)
 8 |     {
 9 |         DateFormat d = DateFormat.getDateInstance();
10 |         long milliseconds = Long.parseLong( timeStampString ) * 1000;
11 |         return 
12 |             d.format(new Date(milliseconds));
13 |     }
14 |     
15 |     public static Double getHour(String timeStampString)
16 |     {
17 |         long milliseconds = Long.parseLong( timeStampString ) * 1000;
18 |         Calendar c = Calendar.getInstance();
19 |         c.setTime( new Date( milliseconds ) );
20 |         return new Double( c.get( Calendar.HOUR_OF_DAY ) );
21 |     }
22 |     
23 |     public static Double getMinute(String timeStampString)
24 |     {
25 |         long milliseconds = Long.parseLong( timeStampString ) * 1000;
26 |         Calendar c = Calendar.getInstance();
27 |         c.setTime( new Date( milliseconds ) );
28 |         return new Double( c.get( Calendar.MINUTE ) );
29 |     }
30 | }
31 | 


--------------------------------------------------------------------------------
/static_figures/appd/temperatures.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 2 x 7 matrix of temperatures
 4 | 
 5 | 
 6 | 
29 | 
30 | 
31 | 
32 | 
33 |   [
34 | 
35 | 
36 |  22.3 
37 |  26 
38 |  27.2 
39 |  24.8 
40 |  28 
41 |  25 
42 |  28.2 
43 | 
44 | 
45 |  30.3 
46 |  30.4 
47 |  28 
48 |  26.4 
49 |  29.9 
50 |  27.2 
51 |  26 
52 | 
53 | 
54 | ]
55 | 
56 | 
57 | 


--------------------------------------------------------------------------------
/static_figures/ch04/rectangle_example.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 6 |   
 7 |    rect element with fill and fill-opacity
 8 |    Displays several rectangles with varying fill
 9 |       and fill-opacity properties.
10 | 
11 |    
12 |    
13 | 
14 |    
15 |    
17 | 
18 |    
19 |    
22 | 
23 |    
24 |    
27 | 
28 | 


--------------------------------------------------------------------------------
/static_figures/ch06/rotation_angle.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 6 | 
 7 | 
 8 | 
 9 | 
10 | 
11 | 
12 | 
13 |   
14 |   
15 |   
16 |   
17 | 
18 | 
19 | 0°
20 | 45°
21 | 90°
22 | 135°
23 | 180°
24 | 225°
25 | 270°
26 | 315°
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 


--------------------------------------------------------------------------------
/static_figures/ch04/stroke_dasharray.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 6 |   stroke-dasharray
 7 |   Show various values of the stroke-dasharray property.
 8 |   
 9 |      
10 |      
13 | 
14 |      
15 |      
18 | 
19 |      
22 |      
25 |   
26 | 
27 | 


--------------------------------------------------------------------------------
/static_figures/ch07/bad_multi_marker.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 6 |    Incorrectly oriented markers
 7 |   Line with incorrectly oriented marker.
 8 | 
 9 | 
10 |   
11 |       
12 |   
13 | 
14 |   
15 |       
16 |   
17 | 
18 |   
19 |       
20 |   
21 | 
22 | 
23 | 
28 | 
29 | 
30 | 


--------------------------------------------------------------------------------
/ch04/ch04_svg_template.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 5 | 
 6 |   
 7 |   $title
 8 |   
 9 |   
10 | 
11 | 
12 | 
13 | 
14 | 

15 | 

16 | 
$markup

17 | 

18 | 

19 |   
20 |   
21 |    Zoom
22 |    
23 | 

24 | 
 
25 | 
26 | 

27 |   
28 |     
29 |   
30 | 

31 | 
32 | 
33 | 
34 | 


--------------------------------------------------------------------------------
/ch05/ch05_svg_template.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 5 | 
 6 |   
 7 |   $title
 8 |   
 9 |   
10 | 
11 | 
12 | 
13 | 
14 | 

15 | 

16 | 
$markup

17 | 

18 | 

19 |   
20 |   
21 |    Zoom
22 |    
23 | 

24 | 
 
25 | 
26 | 

27 |   
28 |     
29 |   
30 | 

31 | 
32 | 
33 | 
34 | 


--------------------------------------------------------------------------------
/ch07/ch07_svg_template.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 5 | 
 6 |   
 7 |   $title
 8 |   
 9 |   
10 | 
11 | 
12 | 
13 | 
14 | 

15 | 

16 | 
$markup

17 | 

18 | 

19 |   
20 |   
21 |    Zoom
22 |    
23 | 

24 | 
 
25 | 
26 | 

27 |   
28 |     
29 |   
30 | 

31 | 
32 | 
33 | 
34 | 


--------------------------------------------------------------------------------
/ch15/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Chapter ch15
 5 |     
 6 |     
 7 | 
 8 | 
 9 | 
ch15

10 | 
11 |   
12 |     
13 |       
14 |     
15 |   
16 |   
17 |     
18 |       
19 |       
20 |     
21 |     
22 |       
23 |       
24 |     
25 |     
26 |       
27 |       
28 |     
29 |     
30 |       
31 |       
32 |     
33 |   
34 | 
FileLast ModifiedSize
index.html25-Nov-2014 19:461008
KSJC.xml01-Oct-2014 14:46971
thermometer1.xsl01-Oct-2014 14:463052
weather.xsl01-Oct-2014 14:468223

35 | 
36 | 
37 | 


--------------------------------------------------------------------------------
/ch01/ch01_svg_template.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 5 | 
 6 | 
 7 |   
 8 |   $title
 9 |   
10 |   
11 | 
12 | 
13 | 
14 | 
15 | 

16 | 

17 | 
$markup

18 | 

19 | 

20 |   
21 |   
22 |    
23 | 

24 | 
 
25 | 
26 | 

27 |   
28 |     
29 |   
30 | 

31 | 
32 | 
33 | 
34 | 
35 | 


--------------------------------------------------------------------------------
/converter.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 5 | 
 6 | 
 7 | 	
 8 |     Convert XML to entities
 9 |     
21 | 
22 | 
23 | 
24 |   
Enter XML here

25 |   
26 |   
27 |   
28 |   
29 |   
Here is your XML in entity form

30 |   
31 | 
32 | 
33 | 
34 | 


--------------------------------------------------------------------------------
/ch08/ch08_svg_template.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 5 | 
 6 |   
 7 |   $title
 8 |   
 9 |   
10 | 
11 | 
12 | 
13 | 
14 | 

15 | 

16 | 
$markup

17 | $commentary
18 | 

19 | 

20 |   
21 |   
22 |    Zoom
23 |    
24 | 

25 | 
 
26 | 
27 | 

28 |   
29 |     
30 |   
31 | 

32 | 
33 | 
34 | 
35 | 


--------------------------------------------------------------------------------
/static_figures/ch06/skew_transform.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 6 |   Result of skewX and skewY transformations
 7 |   Shows lines skewed in X and Y directions.
 8 | 
 9 |    
10 |   
11 |       
12 |       
13 |       
14 |   
15 | 
16 |    
17 |        
18 |           
20 |           skewX 
21 |       
22 |   
23 | 
24 |    
25 |       
26 |           
28 |           skewY
29 |       
30 |   
31 | 
32 | 


--------------------------------------------------------------------------------
/static_figures/ch09/start_offset.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 7 |    Effects of long text and startOffset
 8 | 
 9 | 
10 |   
13 | 
14 |   
17 | 
18 | 
19 | 
20 |    
21 |   
22 |     
23 |       This text is too long for the path.
24 |       
25 |   
26 | 
27 |     
28 |   
29 |     
30 |       centered
31 |     
32 |   
33 | 
34 | 
35 | 


--------------------------------------------------------------------------------
/ch12/ch12_svg_template.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 5 | 
 6 | 
 7 |   
 8 |   $title
 9 |   
10 |   
11 | 
12 | 
13 | 
14 | 
15 | 

16 | 

17 | 
$markup

18 | 

19 | 

20 |   
21 |   
22 |    
23 | 

24 | 
 
25 | 
26 | 

27 |   
28 |     
29 |   
30 | 

31 | 
32 | 
33 | 
34 | 
35 | 


--------------------------------------------------------------------------------
/static_figures/appd/generic_transformation.svg:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 4 | 
 5 |     
 6 |         
 7 |          a 
 8 |          b 
 9 |          0 
10 |          c 
11 |          d 
12 |          0 
13 |          e 
14 |          f 
15 |          1 
16 |         
17 |     
18 | 
19 | 


--------------------------------------------------------------------------------
/static_figures/ch10/masked_graphic.svg:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 4 | 
 5 | 
 8 |   Masked image
 9 | 
10 |   
11 |     
12 |       
13 |         
14 |            
15 |     
16 | 
17 |     
18 |       
19 |       
20 |       
21 |     
22 |     
23 |       
25 |     
26 |   
27 | 
28 |   
29 | 
30 |   
33 | 
34 | 
35 | 


--------------------------------------------------------------------------------
/static_figures/ch04/polygon_figure.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 7 | 
 8 |   preserveAspectRatio="xMinYMin meet">
 9 |   
10 |   Polygons
11 |   Displays a parallelogram, star, and odd-shaped polygon.
12 | 
13 |   
15 | 
16 |   
17 |     
18 |     
20 | 
21 |     
22 |     
27 | 
28 |     
29 |     
33 |    
34 | 
35 | 


--------------------------------------------------------------------------------
/static_figures/ch04/stroke_width_figure.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 7 |    stroke-width
 8 |    Draws a horizontal, vertical, and diagonal line with
 9 |       very thick lines on a grid.
10 |   
12 | 
13 |   
14 |      
15 |      
16 |      
17 |      
18 |      
19 |      
20 |      
22 |      
23 |      
25 |      
26 |      
28 |   
29 | 
30 | 


--------------------------------------------------------------------------------
/static_figures/ch04/rounded_rectangle_figure.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 7 |   
 8 |   Rounded Rectangles
 9 |   Displays several rect elements with varying
10 |    values of rx and ry.
11 |   
13 |   
14 |     
15 |     
17 | 
18 |     
20 | 
21 |     
23 | 
24 |     
25 |     
27 | 
28 |     
30 |   
31 | 
32 | 


--------------------------------------------------------------------------------
/static_figures/ch07/final_marker.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 7 | 
 8 | Lines and arc with markers
 9 | Lines and arc with markers in their final, correct positions.
10 | 
11 | 
12 |   
14 |       
15 |   
16 | 
17 |   
19 |       
20 |   
21 | 
22 |   
24 |       
25 |   
26 | 
27 | 
28 | 
33 | 
34 | 


--------------------------------------------------------------------------------
/static_figures/ch08/pattern_content_units.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 6 |   Tiles spaced by objectBoundingBox
 7 | 
 8 |   
 9 |   
13 |       
15 |       
17 |   
18 | 
19 |   
20 | 
21 |   
22 |   
24 |   
25 | 
26 |   
27 |   
29 |   
30 | 
31 |   
32 |   
34 |   
35 | 
36 | 


--------------------------------------------------------------------------------
/ch13/svg_css_link.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 5 | 
 6 | 
 7 |   
 8 |   CSS with Links in SVG
 9 |   
13 | 
14 | 
15 | 
16 | 
17 | 

18 |   
21 |     
22 |       Cat
23 |     
24 | 
25 |     
26 |       
27 |       
28 |       
29 |     
30 |   
31 | 

32 | 
33 | 
34 | 
35 | 
36 | 


--------------------------------------------------------------------------------
/ch10/minicat.svg:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 4 | 
 5 | 
 9 | Cat
10 | 
11 |   Stick Figure of a Cat
12 | 
13 | 
14 | 
15 | 
16 | 
17 | 
18 | 
19 |   
20 |   
21 | 
22 | 
23 | 
24 | 
26 | 
27 | 
29 | 
30 | 
32 | 
33 | 
34 | 


--------------------------------------------------------------------------------
/static_figures/ch07/multi_quadratic_bezier.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 6 | 
 7 | Quadratic polybézier curve
 8 | Diagram showing two connected Bézier curves
 9 | 
10 | 
11 |   
12 |     
13 |     
14 | 
15 |     
16 |     
17 |   
18 | 
19 |   
20 |     
21 |     
22 |     
23 |     
24 |     
25 |   
26 |   
27 |     
28 |   
29 | 
30 | 
31 | 
32 | 
33 | 
34 |   
35 | 
36 | 
37 | 
38 | 


--------------------------------------------------------------------------------
/static_figures/ch07/cubic_polybezier.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 7 | Cubic polybézier curve
 8 | Two connected Bézier curves.
 9 | 
10 | 
11 |   
13 |   
14 |   
15 |     
16 |     
17 |     
18 |     
19 |     
20 |     
21 |     
22 |   
23 |   
25 | 
26 | 
27 | 
28 | 
29 | 
31 | 
32 | 
33 | 


--------------------------------------------------------------------------------
/static_figures/appf/example_f02a.fo:
--------------------------------------------------------------------------------
 1 | 
 2 |  
 3 |  
 4 | 
11 |  
12 | 
13 | 
14 | 
15 |  
16 |  
17 | 
18 |      
19 |     The Peoria Bagpipe and Timpani Ensemble Performs
20 |     
21 |     
22 |     
24 |     Beethoven on Broadway!
25 |     
26 | 
27 |       
28 |     
30 |     
31 | 
32 |      
33 |     Copyright 2001 O'Reilly & Associates
34 |     
35 | 
36 | 
37 | 
38 | 


--------------------------------------------------------------------------------
/static_figures/ch01/cat_text.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 6 | Cat
 7 | Stick Figure of a Cat
 8 | 
 9 | 
10 | 
11 | 
12 | 
13 |    
14 |    
15 | 
16 | 
17 | 
18 | 
20 | 
21 | 
23 | 
24 | 
26 | Cat
28 | 
29 | 


--------------------------------------------------------------------------------
/static_figures/ch12/cat.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 7 | Cat
 8 | Stick Figure of a Cat
 9 | 
10 | 
11 | 
12 | 
13 | 
14 |    
15 |    
16 | 
17 | 
18 | 
19 | 
21 | 
22 | 
24 | 
25 | 
27 | Cat
29 | 
30 | 


--------------------------------------------------------------------------------
/static_figures/ch10/minicat.svg:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 4 | 
 5 | 
 9 | Cat
10 | 
11 |   Stick Figure of a Cat
12 | 
13 | 
14 | 
15 | 
16 | 
17 | 
18 | 
19 |   
20 |   
21 | 
22 | 
23 | 
24 | 
26 | 
27 | 
29 | 
30 | 
32 | 
33 | 
34 | 


--------------------------------------------------------------------------------
/static_figures/ch07/quadratic_bezier.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 6 | Visualizing a quadratic Bézier Curve
 7 | Diagram showing the DeCasteljau method of drawing
 8 |   a Bézier Curve
 9 | 
10 |   
12 |   
14 | 
15 |   
16 | 
17 |   
18 |     
19 |     
20 |     
21 |     
22 | 
23 |     
24 |     
25 |     
26 |     
27 |   
28 |   
29 |   
30 |   
32 | 
33 | 
34 | 


--------------------------------------------------------------------------------
/ch03/ch03_grid_template.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 5 | 
 6 | 
 7 |   
 8 |   $title
 9 |   
10 |   
11 | 
12 | 
13 | 
14 | 
15 | 

16 | 

17 | 
$markup

18 | 

19 | 

20 |   
21 |   
22 |    Show grid
24 |    
25 | 

26 | 
 
27 | 
28 | 

29 |   
30 |     
31 |     $grid
32 |     
33 |     >
34 |   
35 | 

36 | 
37 | 
38 | 
39 | 
40 | 


--------------------------------------------------------------------------------
/ch13/cat.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 7 |   Cat
 8 |   Stick Figure of a Cat
 9 | 
10 |   
11 |   
12 |   
13 |   
14 |     
15 |     
16 |   
17 |   
18 |   
19 |   
21 |   
22 |   
24 |   
25 |   
27 |   Cat
29 | 
30 | 


--------------------------------------------------------------------------------
/static_figures/ch01/cat.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 7 |   Cat
 8 |   Stick Figure of a Cat
 9 | 
10 |   
11 |   
12 |   
13 |   
14 |     
15 |     
16 |   
17 |   
18 |   
19 |   
21 |   
22 |   
24 |   
25 |   
27 |   Cat
29 | 


--------------------------------------------------------------------------------
/static_figures/ch02/cat.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 7 |   Cat
 8 |   Stick Figure of a Cat
 9 | 
10 |   
11 |   
12 |   
13 |   
14 |     
15 |     
16 |   
17 |   
18 |   
19 |   
21 |   
22 |   
24 |   
25 |   
27 |   Cat
29 | 


--------------------------------------------------------------------------------
/static_figures/ch05/g_simple.svg:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 4 | 
 5 | 
 7 | 
 8 | Grouped Drawing
 9 | Stick-figure drawings of a house and people
10 | 
11 | 
12 |     House with door
13 |     
14 |     
15 |     
16 | 
17 | 
18 | 
19 |     Male human
20 |     
21 |     
22 |     
23 |     
24 | 
25 | 
26 | 
27 |     Female human
28 |     
29 |     
30 |     
31 |     
32 |     
33 | 
34 | 
35 | 


--------------------------------------------------------------------------------
/static_figures/ch07/smooth_quadratic.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 6 | Smooth Quadratic polybézier curve
 7 | Diagram showing two smoothly connected Bézier curves
 8 | 
 9 | 
10 |   
11 |     
12 |     
13 |     
15 |     
16 |     
17 |   
18 |   
19 |     
20 |     
21 |     
22 |     
23 |     
24 |   
25 |   
26 |     
27 |   
28 | 
29 | 
30 | 
31 | 
32 | 
33 |   
34 | 
35 | 
36 | 
37 | 


--------------------------------------------------------------------------------
/ch13/simple_event.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 7 | 
 8 |   Simple Event Handling in SVG
 9 |   Change radius of a circle when hovered; change
10 |     stroke width when clicked
11 | 
12 |   
14 | 
15 |   
38 | 
39 | 


--------------------------------------------------------------------------------
/static_figures/ch13/cat.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 7 |   Cat
 8 |   Stick Figure of a Cat
 9 | 
10 |   
11 |   
12 |   
13 |   
14 |     
15 |     
16 |   
17 |   
18 |   
19 |   
21 |   
22 |   
24 |   
25 |   
27 |   Cat
29 | 
30 | 


--------------------------------------------------------------------------------
/ch06/ch06_grid_template.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 5 | 
 6 |   
 7 |   $title
 8 |   
 9 |   
10 | 
11 | 
12 | 
13 | 
14 | 

15 | 

16 | 
$markup

17 | 

18 | 

19 |   
20 |   
21 |    Show grid
23 |    
24 | 

25 | 
 
26 | 
27 | 

28 |   
29 |     
30 |     $grid
31 |     
32 |     
33 |     $grid2
34 |     
35 |     
36 |   
37 | 

38 | 
39 | 
40 | 
41 | 
42 | 


--------------------------------------------------------------------------------
/static_figures/ch13/simple_event.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 7 | 
 8 |   Simple Event Handling in SVG
 9 |   Change radius of a circle when hovered; change
10 |     stroke width when clicked
11 | 
12 |   
14 | 
15 |   
38 | 
39 | 


--------------------------------------------------------------------------------
/ch04/ch04_grid_template.html:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 5 | 
 6 |   
 7 |   $title
 8 |   
 9 |   
10 | 
11 | 
12 | 
13 | 
14 | 

15 | 

16 | 
$markup

17 | 

18 | 

19 |   
20 |   
21 |    Show grid
23 |    Zoom
24 |    
25 | 

26 | 
 
27 | 
28 | 

29 |   
30 |     
31 |     $grid
32 |     
33 |     >
34 |   
35 | 

36 | 
37 | 
38 | 
39 | 


--------------------------------------------------------------------------------
/static_figures/ch08/radial_spread_method.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 7 |   
 8 |   spreadMethod values for a radial gradient
 9 |   pad, repeat, and reflect
10 |  
11 |   
12 |     
14 |         
15 |         
16 |         
17 |     
18 | 
19 |     
21 |     
23 |     
25 |   
26 | 
27 |   
29 |   
31 |   
33 | 
34 | 


--------------------------------------------------------------------------------
/static_figures/ch07/smooth_cubic_bezier.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 6 |   Smooth cubic polybézier curve
 7 |   Two cubic Bézier curves sharing a reflected
 8 |     control point.
 9 |     
10 | 
11 |   
13 |   
15 |   
17 |   
18 |     
19 |     
20 |     
21 |     
22 |     
23 |     
24 |     
25 |   
26 |   
28 | 
29 | 
30 | 
31 | 
32 | 
34 | 
35 | 
36 | 


--------------------------------------------------------------------------------
/static_figures/appc/fig_c03.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 5 | 
 6 | 
 7 | 
 8 | 	
10 | 	
12 | 	
14 | 
15 | 
16 | 
17 | 
18 | 	
19 | 	radiusSizes
20 | 	8.5
22 | 	[0]
23 | 	
24 | 	6.4
26 | 	[1]
27 | 	
28 | 	12.2
30 | 	[2]
31 | 	
32 | 	9
34 | 	[3]
35 | 
36 | 
37 | 


--------------------------------------------------------------------------------
/ch10/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |     Chapter ch10
 5 |     
 6 |     
 7 | 
 8 | 
 9 | 
ch10

10 | 
11 |   
12 |     
13 |       
14 |     
15 |   
16 |   
17 |     
18 |       
19 |       
20 |     
21 |     
22 |       
23 |       
24 |     
25 |     
26 |       
27 |       
28 |     
29 |     
30 |       
31 |       
32 |     
33 |     
34 |       
35 |       
36 |     
37 |   
38 | 
FileLast ModifiedSize
alpha_opacity_mask.html01-Oct-2014 14:463331
clip_path.html01-Oct-2014 14:461682
complex_clip_path.html01-Oct-2014 14:462365
index.html25-Nov-2014 19:461199
minicat.svg01-Oct-2014 14:461120

39 | 
40 | 
41 | 


--------------------------------------------------------------------------------
/static_figures/ch04/rectangle_figure.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 8 |   
 9 |   rect element with fill and fill-opacity
10 |   Displays several rectangles with varying fill
11 |   and fill-opacity properties. Grid in background.
12 | 
13 |   
15 |   
16 | 
17 |    
18 |    
19 | 
20 |    
21 |    
23 | 
24 |    
25 |    
28 | 
29 |    
30 |    
33 |   
34 | 
35 | 


--------------------------------------------------------------------------------
/fill_template.pl:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/perl
 2 | 
 3 | use strict;
 4 | 
 5 | my %vars;
 6 | my $varname;
 7 | my $buf;
 8 | my $data;
 9 | my $temp;
10 | 
11 | while ($data = )
12 | {
13 |   chomp $data;
14 |   if (($temp) = $data =~ m/^(\w+)::/)
15 |   {
16 |     closebuf();
17 |     $buf = $data;
18 |     $buf =~ s/^\w+::\s*//;
19 |     $varname = $temp;
20 |   }
21 |   elsif ($data =~ m/^!fill/)
22 |   {
23 |     closebuf();
24 |     fill_template();
25 |   }
26 |   elsif ($data =~ m/^\s*#/)
27 |   {
28 |     # do nothing
29 |   }
30 |   else
31 |   {
32 |     $buf .= "\n" . $data;
33 |   }
34 | }
35 | 
36 | sub closebuf
37 | {
38 |   if ($buf && $varname)
39 |   {
40 |     $vars{$varname} = encode($buf);
41 |     $varname = "";
42 |   }
43 | }
44 | 
45 | sub fill_template
46 | {
47 |   my $data;
48 |   my $fill_var;
49 |   
50 |   open TEMPLATEFILE, $vars{'template'};
51 |   open OUTFILE, '>', $vars{'output'};
52 | 
53 |   while ($data = )
54 |   {
55 |     while (($fill_var) = $data =~ m/\$(\w+)/)
56 |     {
57 |       $data =~ s/\$$fill_var/$vars{$fill_var}/;
58 |     }
59 |     print OUTFILE $data;
60 |   }
61 |   close OUTFILE;
62 |   close TEMPLATEFILE;
63 | }
64 | 
65 | sub encode
66 | {
67 |   my $buf = shift;
68 |   $buf =~ s/^\s+//;
69 |   $buf =~ s/&/\&/g;
70 |   $buf =~ s//\>/g;
72 |   $buf =~ s/\{\{//g;
74 |   return $buf;
75 | }
76 | 


--------------------------------------------------------------------------------
/static_figures/ch07/cubic_bezier_method.svg:
--------------------------------------------------------------------------------
 1 | 
 3 | 
 4 | 
 6 | Visualizing a cubic Bézier Curve
 7 | Diagram showing relationship between a cubic Bézier Curve
 8 | and its control points.
 9 | 
10 | 
11 |   
12 |     
13 |     
14 |     
15 | 
16 |     
17 |     
18 |     
19 |   
20 | 
21 | 
22 |   a
23 |   a
24 |   a
25 |   b
26 |   b
27 |   c
28 | 
29 | 
30 | 
31 |   
32 |   
33 |   
34 |   
35 |   
36 |   
37 | 
38 | 
39 | 
41 | 
42 | 
43 | 


--------------------------------------------------------------------------------
/static_figures/ch11/diffuse_lighting.svg:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 4 | 
 5 | 
 8 |   Result of applying diffuse lighting filter
 9 |   
10 |     
12 | 
13 |     
15 | 
16 |       
18 | 
19 |       
20 | 
21 |       
26 |           
27 |       
28 | 
29 |       
31 | 
32 |       
34 |     
35 |   
36 | 
37 |   
39 | 
40 | 
41 | 


--------------------------------------------------------------------------------
/static_figures/ch11/luminance_to_alpha.svg:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 4 | 
 5 | 
 8 |    Result of luminanceToAlpha
 9 | 
10 |  
11 |     
12 |       
13 |       
14 |       
15 |       
16 |       
17 |     
18 |   
19 | 
20 |   
22 |       
23 |   
24 | 
25 |   
26 |     Original
27 |     Alpha
28 |   
29 | 
30 |   
31 |     
32 |   
33 | 
34 |   
35 |     
36 |   
37 | 
38 | 


--------------------------------------------------------------------------------
/ch13/shirt_interact.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   SVG and HTML
 6 |   
11 |   
23 | 
24 | 
25 | 
26 | 
SVG and HTML

27 | 

28 |   
30 |     
Alas, your browser does not support SVG.

31 |   
32 | 
33 |   

34 |     
36 |     
38 |     
40 |   

41 | 

42 | 
43 | 
44 | 


--------------------------------------------------------------------------------