This document introduces Scalable Vector Graphics (SVG) and provides an overview of its history, capabilities, and structure. Key points include:
- SVG was developed as an open standard by the W3C to provide rich, reusable visual content for the web using XML.
- SVG allows for vector graphics that can be scaled, manipulated via scripting, styled with CSS, and more. It provides many advantages over raster graphics.
- As an XML format, SVG files are small in size, resolution-independent, and can be dynamically generated and styled on the client-side via JavaScript.
- The document outlines SVG's emergence and development timeline, its structure as an XML language, and its
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
This document summarizes different vector graphic options for use on the web. It discusses the differences between vector and raster graphics, and why vectors are preferable for resolution independence and smaller file sizes. It then examines SVG, Canvas, VML, and CSS3 as vector graphic options, outlining browser support, APIs, and common uses for each. While SVG is ideal theoretically, browser support is still limited, so libraries like SVG Web and Raphael.js are recommended to abstract cross-browser differences. In the end, SVG is generally better than Canvas for interactive graphics with events, while Canvas may be better for full-screen animations and games.
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Guillaume Kossi
Scalable Vector Graphics, or SVGs, are the new "big thing" in web design today, and for a good reason. With the proliferation of retina screens and high resolution displays, we need to adopt techniques that allow us to serve graphics that look good on all screens in all circumstances, and because SVGs offer resolution-independent, fully scalable and crystal clear graphics, it is safe to say that they are the future graphics format of the web.
In this talk we're going to see how SVGs can be styled in CSS, and how they can be animated using CSS animations and transitions. We're also going to cover "responsifying" SVGs using CSS media queries, and how we can control the size and looks of SVGs allowing them to adapt to different screen sizes. We'll cover a short workflow from a vector graphics editor to a responsive animated graphic on screen.
SVG For Web Designers (and Developers) Sara Soueidan
1. The document discusses using SVG for web design, including creating SVG images, optimizing them, and embedding them onto web pages.
2. Designers are advised to use simple shapes over complex paths and to simplify paths when creating SVG images.
3. SVG images can be combined into a single file and referenced on web pages using the <symbol> and <use> elements, providing a method of "spriting" SVG images.
The document discusses HTML5 and SVG. It provides an overview of SVG, including that SVG describes 2D vector images, has full DOM support and scripting capabilities, and is an open standard supported by modern browsers. It also discusses how SVG and HTML5 can be used together, with examples of embedding SVG inline within HTML5, using SVG objects within HTML5, and combining SVG and HTML5 on the same page.
Developers keep hearing a lot about HTML5, but many don’t know what it actually means or is truly capable of. In this deep dive you will learn how to use HTML5 to solve existing challenges on the web and how to design and develop stunning HTML5 application. You will also preview HTML5 application runs cross platforms, in the desktop browsers as well as on the Phones. What will be covered in the session:
• Introduction to CSS3, Canvas, SVG, Video, and Audio
• What is the real potential of HTML5 using CSS3, Canvas, SVG, Video, Audio, and JavaScript?
• Canvas and SVG comparison, and when to use what
• Best Practices of writing good HTML5 application
• Come and see a collection of the best HTML5 application on Games, Videos, Movies, Comics, Travel, Music and Art
• Expect a lot of demos and code
Presentation and demo will be available at http://blogs.msdn.com/b/dorischen/
SVG (Scalable Vector Graphics) is a XML-based format for defining vector graphics. It allows graphics to be scalable, zoomable and searchable. Common SVG shapes that can be created include circles, rectangles, ellipses, lines, and paths. Attributes like cx, cy, r are used to define properties of circles and ellipses, while x1, y1, x2, y2 define the start and end points of a line. SVG graphics do not lose quality when resized.
This document provides an overview and summary of Scalable Vector Graphics (SVG). It begins with a brief introduction to SVG concepts like basic shapes. It then discusses the history and evolution of SVG standards over time. It outlines how SVG is commonly used today in areas like logos, icons, charts and graphics. Examples are given of tools for editing, optimizing and automating SVG. Reasons for using SVG like crisp images, scriptability, animations and small file sizes are explained. The document discusses how SVG is used and its potential in Drupal. It concludes with an overview of the future SVG 2 standard and resources for learning more about SVG.
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
This document summarizes different vector graphic options for use on the web. It discusses the differences between vector and raster graphics, and why vectors are preferable for resolution independence and smaller file sizes. It then examines SVG, Canvas, VML, and CSS3 as vector graphic options, outlining browser support, APIs, and common uses for each. While SVG is ideal theoretically, browser support is still limited, so libraries like SVG Web and Raphael.js are recommended to abstract cross-browser differences. In the end, SVG is generally better than Canvas for interactive graphics with events, while Canvas may be better for full-screen animations and games.
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Guillaume Kossi
Scalable Vector Graphics, or SVGs, are the new "big thing" in web design today, and for a good reason. With the proliferation of retina screens and high resolution displays, we need to adopt techniques that allow us to serve graphics that look good on all screens in all circumstances, and because SVGs offer resolution-independent, fully scalable and crystal clear graphics, it is safe to say that they are the future graphics format of the web.
In this talk we're going to see how SVGs can be styled in CSS, and how they can be animated using CSS animations and transitions. We're also going to cover "responsifying" SVGs using CSS media queries, and how we can control the size and looks of SVGs allowing them to adapt to different screen sizes. We'll cover a short workflow from a vector graphics editor to a responsive animated graphic on screen.
SVG For Web Designers (and Developers) Sara Soueidan
1. The document discusses using SVG for web design, including creating SVG images, optimizing them, and embedding them onto web pages.
2. Designers are advised to use simple shapes over complex paths and to simplify paths when creating SVG images.
3. SVG images can be combined into a single file and referenced on web pages using the <symbol> and <use> elements, providing a method of "spriting" SVG images.
The document discusses HTML5 and SVG. It provides an overview of SVG, including that SVG describes 2D vector images, has full DOM support and scripting capabilities, and is an open standard supported by modern browsers. It also discusses how SVG and HTML5 can be used together, with examples of embedding SVG inline within HTML5, using SVG objects within HTML5, and combining SVG and HTML5 on the same page.
Developers keep hearing a lot about HTML5, but many don’t know what it actually means or is truly capable of. In this deep dive you will learn how to use HTML5 to solve existing challenges on the web and how to design and develop stunning HTML5 application. You will also preview HTML5 application runs cross platforms, in the desktop browsers as well as on the Phones. What will be covered in the session:
• Introduction to CSS3, Canvas, SVG, Video, and Audio
• What is the real potential of HTML5 using CSS3, Canvas, SVG, Video, Audio, and JavaScript?
• Canvas and SVG comparison, and when to use what
• Best Practices of writing good HTML5 application
• Come and see a collection of the best HTML5 application on Games, Videos, Movies, Comics, Travel, Music and Art
• Expect a lot of demos and code
Presentation and demo will be available at http://blogs.msdn.com/b/dorischen/
SVG (Scalable Vector Graphics) is a XML-based format for defining vector graphics. It allows graphics to be scalable, zoomable and searchable. Common SVG shapes that can be created include circles, rectangles, ellipses, lines, and paths. Attributes like cx, cy, r are used to define properties of circles and ellipses, while x1, y1, x2, y2 define the start and end points of a line. SVG graphics do not lose quality when resized.
This document provides an overview and summary of Scalable Vector Graphics (SVG). It begins with a brief introduction to SVG concepts like basic shapes. It then discusses the history and evolution of SVG standards over time. It outlines how SVG is commonly used today in areas like logos, icons, charts and graphics. Examples are given of tools for editing, optimizing and automating SVG. Reasons for using SVG like crisp images, scriptability, animations and small file sizes are explained. The document discusses how SVG is used and its potential in Drupal. It concludes with an overview of the future SVG 2 standard and resources for learning more about SVG.
The document discusses using SVG images and CSS techniques to improve accessibility in WordPress themes. It provides tips for using SVG images in an accessible way, such as adding the "role=img" attribute to SVG files and using the <title> or <desc> elements for inline SVGs. It also suggests using CSS classes to hide non-essential text from sighted users while retaining it for screen readers. The document demonstrates how highlighting different page elements in the CSS can help test that landmarks and other accessibility standards are properly implemented.
Accessibility Hacks Wordcamp Manchester October 2018Graham Armfield
A bunch of small accessibility tweaks that WordPress theme builders can make to improve the accessibility of their products.
Contains a section on making SVG files accessible to screen reader users. And then some CSS techniques that can help trap accessibility gotchas when building themes, and for content authors when they preview posts or pages.
The document discusses HTML5 and provides an agenda for an HTML5 training session. It introduces HTML5 and covers new HTML5 elements, the <canvas> element for drawing graphics, and how to draw paths, boxes, circles and text on the canvas using JavaScript. It also briefly mentions HTML5 features for media, storage, and forms.
Slides for presentation at DrupalCon Munich August 2012
http://munich2012.drupal.org/program/sessions/backbonejs-frontend
Author: David Corbacho
http://corbacho.info
This document provides an overview of CSS3 features including borders, backgrounds, text effects, fonts, transforms, transitions, animations, multiple columns, and selectors. It begins with an introduction to CSS3 and what it adds compared to CSS2. It then covers specific CSS3 modules like borders, backgrounds, text effects and how to create various visual effects. It demonstrates how to use CSS3 features like rounded borders, multiple backgrounds, shadows, fonts, 2D and 3D transforms, transitions and animations. The document also covers CSS3 multiple column layouts, and new selector types introduced in CSS3.
CSS3 isn't the future, it's the present. Learn the gamut of CSS3 properties from colors, web fonts, and visual effects, to transitions, animations and media queries. Find the inspiration and resources to go forth and implement the new properties with confidence.
This document provides an overview of creating simple and responsive CSS3 designs. It discusses:
- Using a flexible grid, flexible images, and media queries to make a design responsive.
- The four steps to get responsive: plan the design, crunch the numbers, determine breaking points, and add media queries.
- New CSS3 properties and selectors that allow for richer web experiences.
- Tips for cross-browser compatibility like leveraging source order, filtering styles, and using tools to handle vendor prefixes.
CSS3 is an update to the CSS2.1 specification that introduces many new features and modules. Some key CSS3 modules include selectors, backgrounds and borders, text effects, transformations, transitions, multiple columns, and user interface. CSS3 allows for rounded borders using border-radius, box shadows using box-shadow, and image borders using border-image. Other CSS3 properties include text-shadow, word-wrap, transforms like rotate and scale, transitions for animated effects, multiple columns layout, and user interface features like resizing and outlines. Support for CSS3 varies across browsers.
An introduction and demonstration of graphics and animation techniques using canvas and CSS3 working in concert in webkit with html5. Targeted for Palm webOS devices, but compatible with other webkit implementations.
1. HTML5 is a major revision to the HTML standard that is still under development and aims to be the future of the web.
2. It includes new elements like <video>, <audio>, and <canvas> that allow embedding multimedia without plugins, as well as features like geolocation.
3. The HTML5 specification is very large, covering HTML, SVG, CSS, and APIs. It aims to provide a common standard for web applications.
4. HTML5 is not just a marketing term - it represents an ongoing effort to develop a unified standard for the next generation of the web.
This document provides an introduction and overview of CSS3 properties and features. It begins with an introduction to CSS3 and discusses how it is backwards compatible with CSS2. It then outlines several new CSS3 properties including border-radius for rounded corners, box-shadow for drop shadows, text-shadow, multiple backgrounds, background-size, text-overflow, and resize. Examples are provided for each property. The document concludes with recommendations for CSS3 style samples and a demo combining HTML5 and CSS3.
This document provides an agenda and introduction for a training session on HTML5. It discusses HTML5 features like new elements, canvas, SVG, drag and drop, geolocation, video, audio, forms, storage and more. The trainer is Mehdi Jalal from NETLINKS for the Afghanistan Workforce Development Program. Browser support for HTML5 is still evolving as the specification is not fully complete.
Eric Sembrat gave a presentation on using Sass (Syntactically Awesome Style Sheets) to improve CSS workflows. He began by introducing himself and outlining the presentation. He then discussed frustrations with CSS like vendor prefixes and copying styles. Sass addresses these issues through features like variables, nesting, mixins and inheritance which allow for more modular, reusable and scalable CSS code. It compiles Sass files into normal CSS. The presentation concluded with a demonstration of Sass's capabilities.
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
Here are the steps to build a basic horizontal navigation menu bar:
1. Create an unordered list <ul> with class="menu"
2. Add list items <li> for each menu item
3. Style the <ul> with display:inline-block and border-bottom
4. Style the <li> with display:inline-block, padding and hover effect
5. Add a class="current" to highlight the active page
6. Use a border-left on .current to create a left arrow
Let me know if any part needs more explanation! Building menus is a common task and these techniques will serve you well.
The document provides an overview of HTML5 forms, including new form attributes, input types, and elements. It discusses features like autocomplete, novalidate, and autofocus attributes that control form validation and autofilling. The document also notes that HTML5 makes marking up forms easier for developers and provides better consistency and performance for users by handling validation natively in the browser.
The document discusses making your own CSS framework to manage multiple websites with limited resources. It recommends starting with a CSS reset, basic structural elements, and columns for layout. Future-proof the framework to match HTML5. Keep colors, images, and styling out of the framework. Build reusable widgets and allow for design freedom and individuality across sites. The initial version may be too constricting without flexibility. Add optional "flare" like boxes and slideshows once the basics are established. The framework should be easily upgradable and accessible across managed sites.
CSS3 provides new features for layout, typography, visual effects and graphics. Some key features include multiple column layout, rounded corners, box shadows, opacity, gradients, reflections, transforms and animations. Browser support for CSS3 is evolving with many properties requiring vendor prefixes. CSS3 brings more powerful and flexible options for designing user interfaces beyond what is possible with CSS2.
This document provides an overview of HTML5 and CSS3 topics. It begins with an agenda for HTML5 that covers basics like tags, attributes and elements. It then discusses HTML5 semantic elements and features like video, audio, and forms. For CSS3, it outlines modules including borders, backgrounds, gradients, text effects, web fonts, transforms, transitions, animations, columns and user interface. The document aims to introduce key concepts and properties for front-end development.
This document provides an introduction to Scalable Vector Graphics (SVG). It begins with an agenda that outlines topics including what SVG is, why it should be used, tools for working with SVG, and sample artwork. The document then discusses the history and standards behind SVG, how it works as a vector format, and why it may be preferable to other formats like JPEG, PNG, Flash or Silverlight. Browser support, manual and programmatic production of SVG files, and related resources are also covered. The document concludes with an invitation for questions.
Make your own Print & Play card game using SVG and JavaScriptKevin Hakanson
Want to leverage your creativity, love of board games, and web platform experience to do something different? Turn your imagination into a Print & Play card game using only a modern web browser, color printer and text editor.
This session will use the Scalable Vector Graphics (SVG) image format and JavaScript programming language to make a deck of cards for a simple game. Creating a few cards in graphics software like Inkscape is one thing, but what about 50 or 100 cards? What happens when you need to update them all? That’s the value of generating your SVG using JavaScript.
We will start with a blank screen, adding color and graphics elements like lines, shapes, text and images. Learn about container elements and defining content for re-use. Understand how units in the SVG coordinate system can transform our on-screen creation into an 8.5 by 11 inch printed page (or PDF). SVG examples will be both in their native XML format and created from JavaScript using Snap.svg, an open source library from Adobe designed for modern web browsers.
You will leave this session with a basic knowledge of SVG concepts, how to programmatically generate SVG using JavaScript, and how to make your SVG creation printer friendly.
SVG (Scalable Vector Graphics) is an XML language for describing 2D graphics and graphical applications. It allows embedding SVG images directly in HTML5 using the <svg> tag. Examples shown draw basic shapes like a circle using <circle>, rectangle using <rect>, line using <line>, and ellipse using <ellipse>. Most browsers can display SVG files natively but older IE may require an SVG viewer plugin.
The document discusses using SVG images and CSS techniques to improve accessibility in WordPress themes. It provides tips for using SVG images in an accessible way, such as adding the "role=img" attribute to SVG files and using the <title> or <desc> elements for inline SVGs. It also suggests using CSS classes to hide non-essential text from sighted users while retaining it for screen readers. The document demonstrates how highlighting different page elements in the CSS can help test that landmarks and other accessibility standards are properly implemented.
Accessibility Hacks Wordcamp Manchester October 2018Graham Armfield
A bunch of small accessibility tweaks that WordPress theme builders can make to improve the accessibility of their products.
Contains a section on making SVG files accessible to screen reader users. And then some CSS techniques that can help trap accessibility gotchas when building themes, and for content authors when they preview posts or pages.
The document discusses HTML5 and provides an agenda for an HTML5 training session. It introduces HTML5 and covers new HTML5 elements, the <canvas> element for drawing graphics, and how to draw paths, boxes, circles and text on the canvas using JavaScript. It also briefly mentions HTML5 features for media, storage, and forms.
Slides for presentation at DrupalCon Munich August 2012
http://munich2012.drupal.org/program/sessions/backbonejs-frontend
Author: David Corbacho
http://corbacho.info
This document provides an overview of CSS3 features including borders, backgrounds, text effects, fonts, transforms, transitions, animations, multiple columns, and selectors. It begins with an introduction to CSS3 and what it adds compared to CSS2. It then covers specific CSS3 modules like borders, backgrounds, text effects and how to create various visual effects. It demonstrates how to use CSS3 features like rounded borders, multiple backgrounds, shadows, fonts, 2D and 3D transforms, transitions and animations. The document also covers CSS3 multiple column layouts, and new selector types introduced in CSS3.
CSS3 isn't the future, it's the present. Learn the gamut of CSS3 properties from colors, web fonts, and visual effects, to transitions, animations and media queries. Find the inspiration and resources to go forth and implement the new properties with confidence.
This document provides an overview of creating simple and responsive CSS3 designs. It discusses:
- Using a flexible grid, flexible images, and media queries to make a design responsive.
- The four steps to get responsive: plan the design, crunch the numbers, determine breaking points, and add media queries.
- New CSS3 properties and selectors that allow for richer web experiences.
- Tips for cross-browser compatibility like leveraging source order, filtering styles, and using tools to handle vendor prefixes.
CSS3 is an update to the CSS2.1 specification that introduces many new features and modules. Some key CSS3 modules include selectors, backgrounds and borders, text effects, transformations, transitions, multiple columns, and user interface. CSS3 allows for rounded borders using border-radius, box shadows using box-shadow, and image borders using border-image. Other CSS3 properties include text-shadow, word-wrap, transforms like rotate and scale, transitions for animated effects, multiple columns layout, and user interface features like resizing and outlines. Support for CSS3 varies across browsers.
An introduction and demonstration of graphics and animation techniques using canvas and CSS3 working in concert in webkit with html5. Targeted for Palm webOS devices, but compatible with other webkit implementations.
1. HTML5 is a major revision to the HTML standard that is still under development and aims to be the future of the web.
2. It includes new elements like <video>, <audio>, and <canvas> that allow embedding multimedia without plugins, as well as features like geolocation.
3. The HTML5 specification is very large, covering HTML, SVG, CSS, and APIs. It aims to provide a common standard for web applications.
4. HTML5 is not just a marketing term - it represents an ongoing effort to develop a unified standard for the next generation of the web.
This document provides an introduction and overview of CSS3 properties and features. It begins with an introduction to CSS3 and discusses how it is backwards compatible with CSS2. It then outlines several new CSS3 properties including border-radius for rounded corners, box-shadow for drop shadows, text-shadow, multiple backgrounds, background-size, text-overflow, and resize. Examples are provided for each property. The document concludes with recommendations for CSS3 style samples and a demo combining HTML5 and CSS3.
This document provides an agenda and introduction for a training session on HTML5. It discusses HTML5 features like new elements, canvas, SVG, drag and drop, geolocation, video, audio, forms, storage and more. The trainer is Mehdi Jalal from NETLINKS for the Afghanistan Workforce Development Program. Browser support for HTML5 is still evolving as the specification is not fully complete.
Eric Sembrat gave a presentation on using Sass (Syntactically Awesome Style Sheets) to improve CSS workflows. He began by introducing himself and outlining the presentation. He then discussed frustrations with CSS like vendor prefixes and copying styles. Sass addresses these issues through features like variables, nesting, mixins and inheritance which allow for more modular, reusable and scalable CSS code. It compiles Sass files into normal CSS. The presentation concluded with a demonstration of Sass's capabilities.
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
Here are the steps to build a basic horizontal navigation menu bar:
1. Create an unordered list <ul> with class="menu"
2. Add list items <li> for each menu item
3. Style the <ul> with display:inline-block and border-bottom
4. Style the <li> with display:inline-block, padding and hover effect
5. Add a class="current" to highlight the active page
6. Use a border-left on .current to create a left arrow
Let me know if any part needs more explanation! Building menus is a common task and these techniques will serve you well.
The document provides an overview of HTML5 forms, including new form attributes, input types, and elements. It discusses features like autocomplete, novalidate, and autofocus attributes that control form validation and autofilling. The document also notes that HTML5 makes marking up forms easier for developers and provides better consistency and performance for users by handling validation natively in the browser.
The document discusses making your own CSS framework to manage multiple websites with limited resources. It recommends starting with a CSS reset, basic structural elements, and columns for layout. Future-proof the framework to match HTML5. Keep colors, images, and styling out of the framework. Build reusable widgets and allow for design freedom and individuality across sites. The initial version may be too constricting without flexibility. Add optional "flare" like boxes and slideshows once the basics are established. The framework should be easily upgradable and accessible across managed sites.
CSS3 provides new features for layout, typography, visual effects and graphics. Some key features include multiple column layout, rounded corners, box shadows, opacity, gradients, reflections, transforms and animations. Browser support for CSS3 is evolving with many properties requiring vendor prefixes. CSS3 brings more powerful and flexible options for designing user interfaces beyond what is possible with CSS2.
This document provides an overview of HTML5 and CSS3 topics. It begins with an agenda for HTML5 that covers basics like tags, attributes and elements. It then discusses HTML5 semantic elements and features like video, audio, and forms. For CSS3, it outlines modules including borders, backgrounds, gradients, text effects, web fonts, transforms, transitions, animations, columns and user interface. The document aims to introduce key concepts and properties for front-end development.
This document provides an introduction to Scalable Vector Graphics (SVG). It begins with an agenda that outlines topics including what SVG is, why it should be used, tools for working with SVG, and sample artwork. The document then discusses the history and standards behind SVG, how it works as a vector format, and why it may be preferable to other formats like JPEG, PNG, Flash or Silverlight. Browser support, manual and programmatic production of SVG files, and related resources are also covered. The document concludes with an invitation for questions.
Make your own Print & Play card game using SVG and JavaScriptKevin Hakanson
Want to leverage your creativity, love of board games, and web platform experience to do something different? Turn your imagination into a Print & Play card game using only a modern web browser, color printer and text editor.
This session will use the Scalable Vector Graphics (SVG) image format and JavaScript programming language to make a deck of cards for a simple game. Creating a few cards in graphics software like Inkscape is one thing, but what about 50 or 100 cards? What happens when you need to update them all? That’s the value of generating your SVG using JavaScript.
We will start with a blank screen, adding color and graphics elements like lines, shapes, text and images. Learn about container elements and defining content for re-use. Understand how units in the SVG coordinate system can transform our on-screen creation into an 8.5 by 11 inch printed page (or PDF). SVG examples will be both in their native XML format and created from JavaScript using Snap.svg, an open source library from Adobe designed for modern web browsers.
You will leave this session with a basic knowledge of SVG concepts, how to programmatically generate SVG using JavaScript, and how to make your SVG creation printer friendly.
SVG (Scalable Vector Graphics) is an XML language for describing 2D graphics and graphical applications. It allows embedding SVG images directly in HTML5 using the <svg> tag. Examples shown draw basic shapes like a circle using <circle>, rectangle using <rect>, line using <line>, and ellipse using <ellipse>. Most browsers can display SVG files natively but older IE may require an SVG viewer plugin.
The Image that called me - Active Content Injection with SVG FilesMario Heiderich
Mario Heiderich gave a presentation on active content injection using SVG files. He discussed how SVG files are XML-based and support scripting, allowing execution of JavaScript. This enables security issues like XSS. Browser implementations of SVG are inconsistent, with different levels of script support depending on how SVG files are deployed (inline, via <img>, etc). Exploits discussed SVG vulnerabilities in Firefox, Opera, and Chromium. Defense is difficult due to lack of documentation and filters, and new vectors are found weekly. Future work proposed a SVG purifier and raising awareness of issues.
SVG was first introduced on the web in 2001 and finally came around to being a practical web technology in 2011. Thanks to wide browser support and the popularity of retina screens, SVG is a powerful and flexible technology that everyone should have in their web development toolbox. In this talk, I'll tell you why should be using SVGs now and how to integrate SVGs into responsive websites, use it in iconography for resolution independence, and use JavaScript and CSS to create animations and interactive prototypes.
I gave this talk at Front Porch in Dallas, TX on October 7th. http://frontporch.io/
Data visualization has become an essential skill for all digital experiences. As data becomes more available to the public, there is a need to create creative and efficient way of presenting that data on the web. D3 is a javascript library that creates dynamic data driven experiences for the web.
SVG is short for Scalable Vector Graphics. It is a graphic format in which the shapes are specified in XML. The XML is then rendered by an SVG viewer. Today most web browser can display SVG just like they can display PNG, GIF, and JPG.
This document discusses two technologies for creating charts directly in the browser: Canvas and SVG. Canvas uses JavaScript to manipulate pixel data and is best for fast rendering like games, while SVG uses vector-based markup that lives in the DOM, making it easier to interact with and support older browsers with VML. The document recommends SVG for charts since it allows dynamic tooltips and broad browser support without needing polyfills.
The document discusses Scalable Vector Graphics (SVG), which offers resolution-independent graphics for the web. SVG uses XML code to define images as vectors rather than pixels, allowing them to scale smoothly to any size. It has advantages over raster formats like flexibility, small file sizes, and ability to be animated, searched, and scripted. Examples show how to code simple SVG shapes and embed SVG images in web pages using HTML.
SVG is an XML-based format for describing two-dimensional vector graphics, both static and dynamic. SVG allows for scalable images that can be displayed on the web, in print, and on devices with different screen resolutions. It has an XML-based file format and APIs for scripting and animation. SVG was developed by the W3C as an open standard to provide an alternative to proprietary bitmap image formats like GIF and JPEG.
SVG is an XML-based format for describing two-dimensional vector graphics, both static and dynamic. SVG allows for scalable images that can be displayed on the web, in print, and on devices with different screen resolutions. It has an XML-based file format and APIs for scripting and animation. SVG was developed by the W3C as an open standard to provide an alternative to proprietary bitmap image formats like GIF and JPEG.
This document provides an overview of SVG (Scalable Vector Graphics) and compares it to other vector graphics technologies such as Flash, Silverlight, and HTML5 Canvas. It discusses SVG's capabilities, versions, mobile support, and tools. It also covers related topics like animation, JavaScript integration, and browser support. The future of SVG and how it compares to other technologies is explored.
Vskills certification for SVG Professional assesses the candidate as per the company’s need for scalable vector graphics development. The certification tests the candidates on various areas in Coordinates, Document Structure, Shapes, Paths, Coordinate System, Patterns, Gradients, Clipping, Masking, Animating and Scripting SVG.
JavaScript New Tutorial Class XI and XII.pptxrish15r890
The document provides an introduction to JavaScript including:
- JavaScript was developed by Branden Eich in 1995 and is a lightweight, interpreted programming language designed for creating network-centric applications.
- JavaScript is dynamic and commonly used for client-side scripting to interact with users and make dynamic web pages. It has object-oriented capabilities.
- The document discusses JavaScript variables, data types, comments, and keywords as well as uses like client-side validation, manipulating HTML, and presentations.
Revised version of my presentation - first delivered to WordCamp Manchester in 2019.
Presentation looks at some small tweaks to HTML and CSS that can make your site a little more accessible.
Covers: SVG images, screen reader text, some CSS to help when building your web templates/themes, and some CSS that can help show your content authors where they may have made some accessibility mistakes.
This document discusses using SVG and HTML5 video for rich media advertising as an alternative to Flash. It provides a history of rich media ads and examples using Flash. The document demonstrates a prototype rich media ad created with SVG and HTML5 video that performs better than its Flash equivalent. It addresses challenges like a lack of SVG authoring tools and full browser support. The document argues that SVG is more semantic, accessible and an open standard compared to Flash or Canvas. With improved tools and browser support, SVG could become the standard for rich media ads.
This document provides an overview of CSS3 and how to use some of its new features. It explains that CSS3 is being developed in a modular way to allow for more incremental updates. Some new CSS3 features discussed include text shadows, box shadows, opacity, RGBA color values, vendor prefixes, transitions between property changes, and transforms for properties like scale, rotation, and skew. The document recommends using CSS3 primarily for non-critical visual enhancements.
Vector graphics allow shapes to be mathematically represented and scaled smoothly, while raster graphics use a grid of pixels. SVG is an XML format for describing vector shapes and is supported natively by modern browsers. DojoX GFX provides a normalized API for creating vector graphics across browsers using SVG, VML, Canvas, or Silverlight depending on browser support. It implements a procedural subset of SVG for creating shapes and text programmatically similar to the canvas API.
Canvas Based Presentation Tool
LandScape is a canvas based presentation tool that uses Scalable Vector Graphics (SVG) and JavaScript. It allows dynamic control of presentations by zooming, panning, and rotating on a large canvas without slide boundaries. Features include importing multiple media formats, templates, and motion paths for transitions. The goal is to create attractive presentations that are not too dependent on features of the viewing program and require only nominal browser resources. It integrates JavaScript manipulation of SVG objects created using the Inkscape editor.
SVG is often used for content, linked icons, and buttons. Learn which coding methods perform best across a variety of screen reader and browser combinations. By @DennisL
Este documento describe un proyecto realizado por estudiantes del grado noveno para dar un buen uso a los tallos de café después de la cosecha. El proyecto consistió en la elaboración de manualidades y muebles utilizando los tallos de café con el objetivo de aprovechar mejor los recursos y beneficiar económicamente a los campesinos. El cronograma detalla las diferentes etapas del proyecto como la recolección de tallos, su limpieza, perforación y ensamblaje para luego pintar el producto final.
El documento habla sobre un proyecto realizado por estudiantes de noveno grado para aprender sobre los recursos y ganancias de la madera del café. El cultivo de café es importante para la economía colombiana y la madera se puede usar para fabricar muebles u otros artículos que generen ingresos para los productores. El documento también describe las partes de la planta de café y las actividades del proyecto como la recolección, pelado y construcción de muebles de madera de café.
El documento habla sobre un proyecto realizado por estudiantes de noveno grado para aprovechar la madera del café después del zoqueo. Con la madera se fabricaron muebles como butacas, sillas y comedores para generar un ingreso adicional para los productores. El proceso incluyó la recolección, limpieza y corte de los tallos, lijado, ensamblado y pintado de los muebles.
Este documento describe un proyecto realizado por estudiantes de noveno grado para aprender más sobre el cultivo del café y aprovechar la madera de los tallos del café. El proyecto tiene como objetivo construir muebles de madera de café para generar ingresos adicionales mientras las plantas vuelven a producir luego de ser podadas cada 8 años. El documento incluye secciones sobre la justificación, objetivos, marco teórico, cronograma, presupuesto, glosario y bibliografía del proyecto.
Este documento describe un proyecto realizado por estudiantes de noveno grado para aprender más sobre los recursos y beneficios económicos del cultivo de café en Colombia. El proyecto busca aprovechar la madera de los tallos de café cortados cada 8 años para fabricar muebles artesanales y generar ingresos adicionales para los agricultores. Se presentan los objetivos, cronograma, presupuesto, y aspectos técnicos sobre la estructura y uso de la madera del café.
Este documento describe un proyecto realizado por estudiantes de noveno grado para aprender más sobre los recursos y beneficios económicos del cultivo de café en Colombia. El proyecto consistió en recolectar tallos de café después de ser podados, limpiarlos, cortarlos y ensamblarlos para fabricar muebles como butacas y sillas con el objetivo de darle un uso a la madera del café y generar ingresos adicionales para los agricultores. El documento incluye secciones sobre la justificación, objetivos, cronograma, pres
Este documento describe un proyecto realizado por estudiantes de noveno grado para aprender más sobre los recursos y beneficios económicos del cultivo de café en Colombia. El proyecto consistió en recolectar tallos de café después de ser podados, limpiarlos, cortarlos y ensamblarlos para fabricar muebles como butacas y sillas con el objetivo de darle un uso a la madera del café y generar ingresos adicionales para los agricultores. El documento incluye secciones sobre la justificación, objetivos, cronograma, pres
Este documento describe un proyecto realizado por estudiantes de noveno grado para aprender sobre los recursos y beneficios económicos de la madera de café. El proyecto incluyó la recolección, limpieza, corte, ensamblaje y pintura de la madera de café para hacer artículos como sillas y mesas, con el objetivo de aprovechar este recurso y mejorar la economía local. Se proporciona un marco teórico sobre el café, un presupuesto, definiciones útiles y un cronograma de actividades.
Este documento describe un proyecto realizado por estudiantes de noveno grado para aprender más sobre el cultivo del café y aprovechar la madera de los tallos del café para fabricar muebles y generar ingresos adicionales. El proyecto incluye objetivos, un marco teórico sobre las partes de la planta de café, un cronograma, un presupuesto y un glosario. El objetivo general es aprovechar la madera del café dándole un uso artesanal a través de la construcción de muebles.
Este documento describe un proyecto realizado por estudiantes de noveno grado para aprender más sobre los recursos y beneficios económicos de la madera de café. El proyecto incluyó la recolección, limpieza, corte y ensamblaje de la madera de café para crear artículos como sillas y mesas. El documento también incluye un marco teórico sobre el café, un presupuesto, un glosario y un cronograma de actividades para el proyecto.
Este documento describe un proyecto realizado por estudiantes de noveno grado para aprender más sobre los recursos de la madera de café y generar ingresos adicionales. El proyecto consistió en recolectar tallos de café, limpiarlos, cortarlos y ensamblarlos para fabricar muebles como butacas y sillas. Esto permitiría darle un uso a la madera del café que de otra forma se considera un desecho, además de crear empleo y generar ingresos mientras las plantas vuelven a producir luego de ser soqueadas
El resumen describe un proyecto realizado por estudiantes de noveno grado para aprender sobre los recursos y beneficios de la madera de café. Los estudiantes, con la ayuda de profesores y maestros del SENA, utilizaron la madera de café para fabricar muebles como butacas, sillas y comedores. Además de darle un uso a la madera que de otra forma sería desechada, la fabricación de muebles podría generar ingresos adicionales para los productores mientras las plantas vuelven a producir luego de ser podadas cada 8
Este documento describe un proyecto realizado por estudiantes de noveno grado para aprender más sobre el cultivo del café y aprovechar la madera de los tallos del café para fabricar muebles y generar ingresos adicionales. El proyecto tiene los objetivos de recolectar y seleccionar los tallos, limpiarlos, cortarlos, lijarlos, ensamblarlos, pintarlos y vender los muebles terminados. Incluye un cronograma, presupuesto y glosario con términos relacionados.
Este documento describe un proyecto realizado por estudiantes de noveno grado para aprender más sobre el cultivo del café y aprovechar la madera de los tallos del café para fabricar muebles y generar ingresos adicionales. El proyecto incluye objetivos, un marco teórico sobre las partes de la planta de café, un cronograma, un presupuesto y un glosario. El objetivo general es aprovechar la madera del café dándole un uso artesanal a través de la construcción de muebles.
El documento describe un proyecto realizado por estudiantes de noveno grado para aprovechar la madera del café y crear muebles artesanales que generen ingresos para los agricultores. El proyecto tiene los objetivos de recolectar, limpiar y cortar los tallos de café, ensamblar los muebles, y pintarlos. Incluye un cronograma, presupuesto, glosario y referencias bibliográficas.
Este documento describe los pasos y materiales necesarios para crear muebles de madera utilizando los residuos del café. Los estudiantes recogieron palos de café, los lijaron y perforaron. Luego ensamblaron las piezas utilizando clavos, serrucho y pegante. Finalmente, pintaron los muebles y los vendieron para generar ingresos.
El documento describe un proyecto realizado por estudiantes de noveno grado para aprovechar la madera del café y crear muebles artesanales que generen ingresos para los agricultores. El proyecto tiene los objetivos de recolectar, limpiar y cortar los tallos de café, ensamblar los muebles, pintarlos y venderlos. Incluye un cronograma, presupuesto y explica la estructura y función de las partes de la planta de café.
El documento describe un proyecto realizado por estudiantes de noveno grado para aprovechar la madera del café y generar ingresos. El proyecto consistió en recolectar tallos de café, limpiarlos, cortarlos, lijarlos y fabricar muebles como butacas y sillas para la venta. El proceso tomó varios meses y ayudó a darle un uso a la madera del café mientras las plantas vuelven a producir.
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
“An Outlook of the Ongoing and Future Relationship between Blockchain Technologies and Process-aware Information Systems.” Invited talk at the joint workshop on Blockchain for Information Systems (BC4IS) and Blockchain for Trusted Data Sharing (B4TDS), co-located with with the 36th International Conference on Advanced Information Systems Engineering (CAiSE), 3 June 2024, Limassol, Cyprus.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Climate Impact of Software Testing at Nordic Testing DaysKari Kakkonen
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...Neo4j
Leonard Jayamohan, Partner & Generative AI Lead, Deloitte
This keynote will reveal how Deloitte leverages Neo4j’s graph power for groundbreaking digital twin solutions, achieving a staggering 100x performance boost. Discover the essential role knowledge graphs play in successful generative AI implementations. Plus, get an exclusive look at an innovative Neo4j + Generative AI solution Deloitte is developing in-house.
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Speck&Tech
ABSTRACT: A prima vista, un mattoncino Lego e la backdoor XZ potrebbero avere in comune il fatto di essere entrambi blocchi di costruzione, o dipendenze di progetti creativi e software. La realtà è che un mattoncino Lego e il caso della backdoor XZ hanno molto di più di tutto ciò in comune.
Partecipate alla presentazione per immergervi in una storia di interoperabilità, standard e formati aperti, per poi discutere del ruolo importante che i contributori hanno in una comunità open source sostenibile.
BIO: Sostenitrice del software libero e dei formati standard e aperti. È stata un membro attivo dei progetti Fedora e openSUSE e ha co-fondato l'Associazione LibreItalia dove è stata coinvolta in diversi eventi, migrazioni e formazione relativi a LibreOffice. In precedenza ha lavorato a migrazioni e corsi di formazione su LibreOffice per diverse amministrazioni pubbliche e privati. Da gennaio 2020 lavora in SUSE come Software Release Engineer per Uyuni e SUSE Manager e quando non segue la sua passione per i computer e per Geeko coltiva la sua curiosità per l'astronomia (da cui deriva il suo nickname deneb_alpha).
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!SOFTTECHHUB
As the digital landscape continually evolves, operating systems play a critical role in shaping user experiences and productivity. The launch of Nitrux Linux 3.5.0 marks a significant milestone, offering a robust alternative to traditional systems such as Windows 11. This article delves into the essence of Nitrux Linux 3.5.0, exploring its unique features, advantages, and how it stands as a compelling choice for both casual users and tech enthusiasts.
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
In the rapidly evolving landscape of technologies, XML continues to play a vital role in structuring, storing, and transporting data across diverse systems. The recent advancements in artificial intelligence (AI) present new methodologies for enhancing XML development workflows, introducing efficiency, automation, and intelligent capabilities. This presentation will outline the scope and perspective of utilizing AI in XML development. The potential benefits and the possible pitfalls will be highlighted, providing a balanced view of the subject.
We will explore the capabilities of AI in understanding XML markup languages and autonomously creating structured XML content. Additionally, we will examine the capacity of AI to enrich plain text with appropriate XML markup. Practical examples and methodological guidelines will be provided to elucidate how AI can be effectively prompted to interpret and generate accurate XML markup.
Further emphasis will be placed on the role of AI in developing XSLT, or schemas such as XSD and Schematron. We will address the techniques and strategies adopted to create prompts for generating code, explaining code, or refactoring the code, and the results achieved.
The discussion will extend to how AI can be used to transform XML content. In particular, the focus will be on the use of AI XPath extension functions in XSLT, Schematron, Schematron Quick Fixes, or for XML content refactoring.
The presentation aims to deliver a comprehensive overview of AI usage in XML development, providing attendees with the necessary knowledge to make informed decisions. Whether you’re at the early stages of adopting AI or considering integrating it in advanced XML development, this presentation will cover all levels of expertise.
By highlighting the potential advantages and challenges of integrating AI with XML development tools and languages, the presentation seeks to inspire thoughtful conversation around the future of XML development. We’ll not only delve into the technical aspects of AI-powered XML development but also discuss practical implications and possible future directions.
Introducing Milvus Lite: Easy-to-Install, Easy-to-Use vector database for you...Zilliz
Join us to introduce Milvus Lite, a vector database that can run on notebooks and laptops, share the same API with Milvus, and integrate with every popular GenAI framework. This webinar is perfect for developers seeking easy-to-use, well-integrated vector databases for their GenAI apps.
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfMalak Abu Hammad
Discover how MongoDB Atlas and vector search technology can revolutionize your application's search capabilities. This comprehensive presentation covers:
* What is Vector Search?
* Importance and benefits of vector search
* Practical use cases across various industries
* Step-by-step implementation guide
* Live demos with code snippets
* Enhancing LLM capabilities with vector search
* Best practices and optimization strategies
Perfect for developers, AI enthusiasts, and tech leaders. Learn how to leverage MongoDB Atlas to deliver highly relevant, context-aware search results, transforming your data retrieval process. Stay ahead in tech innovation and maximize the potential of your applications.
#MongoDB #VectorSearch #AI #SemanticSearch #TechInnovation #DataScience #LLM #MachineLearning #SearchTechnology
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Learn svg
1.
2. Preface
"With SVG, Web graphics move firmly from mere decoration to true graphical information.
Scalable Vector Graphics are the key to providing rich, reusable visual content for the Web.
At last, designers have the open graphics format they need to make professional graphics not
only work visually on the Web, but perform as searchable, reusable Web content."
- Tim Berners-Lee, W3C director and father of the World Wide Web.
"Designers are reaching larger audiences with an increasing variety of Web-enabled devices
from palmtops to desktops to printers. They need graphics which can be restyled for different
purposes. But most of all, they need to be able to handle their graphics the same way as their
text and business data, which nowadays are in XML. SVG is specifically designed to let them
do that."
- Chris Lilley, W3C Graphics Activity Lead.
Introduction
The first thing you need to know is the authors of Learn SVG are experts in the field of
computer graphics (CAD/simulation background, Graphics Programming and Web Design).
The next thing you need to know is Learn SVG is a tour de force through the world of SVG.
Please do not worry, every concept covered is followed up by clear, intriguing examples that
serve to instruct and inspire.
Scalable Vector Graphics (SVG) is a revolutionary new graphics format that is unleashing
the true potential of graphical information on the Web. SVG is a language for describing two-
dimensional graphics in XML. SVG supports anti-aliased rendering, zooming, panning, filter-
effects, pattern and gradient fills, clipping to paths, text, animations and interactivity and
more! SVG is designed to use and to incorporate other W3C specifications and standards
such as DOM, CSS, XSLT , SMIL.
SVG gives developers, designers, and publishers the ability to create rich lightweight,
interactive, extensible documents that are ideally suited for use on the Web. SVG allows for
pixel-perfect positioning of SVG graphical objects, which include shapes, text as well as
raster graphics such as PNG and JPEG images and supports color accuracy of over 16
million colors.
SVG is revolutionary in that it can be fully customized on the client at runtime by means of
style sheets and script. Users are able to customize colors, fonts, content and even the layout
of graphical objects on the client-side.
You can unleash the power of SVG by combining it with scripting. SVG uses the W3C DOM
(Document Object Model) for scripting SVG documents. SVG has its own document object
model that extends the DOM in a compatible way called the SVG DOM. By being able to use
both of these object models, SVG is able to be scripted in a open and powerful way.
3. Learn SVG Chapter 1 Introduction 2
This book has a special focus on scripting. The scripting content is complete for beginners, as
it introduces EcmaScript and the DOM first and shows how to access and manipulate the
internals of a SVG document via programming.
Furthermore, the book focuses on the generation of highly interactive graphics and shows in
detail how to deal with event handling. Learn SVG will also cover necessary insights into the
essential theory of vector and matrix algebra to explain the guts of the efficient raw
transformation matrices that can even be controlled by the client at runtime.
Aims and Objectives of the Book
About Learn SVG / Approach
The objective of this book is to enable readers who are brand spanking new to SVG to reach a
semi-advanced level of SVG design and programming through a progression of "real-world"
case studies, examples, and scenarios that programmers, Web developers and graphic
designers will face. The reader we will move on to more advanced topics of adding style,
gradients and filter effects, menu creation, animation, script-based interactivity, publishing,
extensibility, and finally implementing cover some cutting-edge SVG Web applications. In
the process, the reader will be transcended from a beginner to a semi-expert SVG developer.
Throughout this book the presentation of both basic and complex concepts are accompanied
by intriguing examples, real-world scenarios and brilliant user interface designs. By the end of
this book the reader will be well equipped to ride the SVG wave and integrate SVG into XML-
based technologies that are at our doorstep.
The challenges of gracefully integrating both the graphic design and programming aspects of
SVG are not insignificant. But with the help of some terrific editors and reviewers we have
produced an excellent foundational text for your reading pleasure.
The workbook-like format of this book lends itself ideally to Web designers and developers
who want both a solid foundation in the main aspects of SVG and who are willing to get their
hands dirty with the fertile soil that SVG has to offer. The full challenge of the book is not for
the faint of heart but Learn SVG has made sure to thoroughly cover all the bases using many
concrete examples.
The purpose of Learn SVG is to inform and inspire readers by covering SVG programming
and design techniques through in-depth examples. This book is for people who are relatively
new to SVG and who want to start fiddling with the guts of SVG right away. This book will
jump right in to real-world examples that can serve as both a workbook and a reference. The
large pool of current programmers, Web developers, content publishers and graphic designers
will find that this book gives them an invaluable edge in their respective and increasingly
overlapping fields.
4. Learn SVG Chapter 1 Introduction 3
Audience of this Book
Due to the fact that SVG is revolutionary, Learn SVG aims to educate a wide-ranging
audience including:
• Web developers and Graphic designers who want to implement powerful Web
applications and Services
• Content-management professionals who need to display visualizations of data
• GIS-people: the world of geographical information systems
• Creators and maintainers of (industrial) technical drawings such as Engineers and
Architects
• The XML-community
• The Flash-community
This book is aimed to inspire many types of content-creators to love SVG. This book
provides a solid foundation for getting started with SVG. We will cover the basics as clearly
and concisely as possible. On the other hand, there is a lot to this new graphics
format/language and so we have included "SVG Concepts", challenges, and advanced
exercises at the end of each chapter that introduce more complex topics for the avid Web
developer. If you are here for the full challenge then please fasten your safety belts and hang
on tightly lest you be thrown to the wolves.
Conventions and Terminology
We use a number of different styles of text and layout in the book to help differentiate
between the different kinds of information. Here are examples of the styles we use and an
explanation of what they mean:
Indentation
Indentation improves readability. Following convention is used for:
• children elements
• elements spanning several lines
Indentation of children elements is 2 space characters.
Elements spanning several lines are broken so, that attributes are in line.
Here is an example of both types of indentations:
<svg width="200" height="100">
<circle cx="10" cy="86" r="15"
5. Learn SVG Chapter 1 Introduction 4
fill="red"
stroke="black" />
<!-- code for the car goes here -->
</svg>
Emphasizing of important code and terms
When you first come across an important term it will be in bold type, then in normal type
thereafter.
We'll use a Courier to emphasize words and phrases that appear on the screen, and code.
Code that is new, important or relevant to the current discussion will be presented like this:
<svg>
<ellipse cx="50" cy="50" rx="10" ry="20" />
</svg>
Code blocks
<svg width="200" height="100">
<circle cx="10" cy="86" r="15"
fill="red"
stroke="black" />
<!-- code for the car goes here -->
</svg>
Menu Commands
Menu commands are written in the form:
Menu > Sub-menu > Sub-menu
Scripting
The script language used throughout this book is EcmaScript, which the W3C accepts as an
open scripting standard. The corresponding element is always :
<script type="text/ecmascript">
<![CDATA[
// script content goes here ..
]]>
</script>
SVG Elements
It is beneficial, to have a common skeleton for introducing a new SVG element or a family of
new elements throughout the book.
The format that will be used will be:
6. Learn SVG Chapter 1 Introduction 5
• Introductory text
• Element syntax
• Explaining element specific attributes. text or table
• Element example(s): picture and code
The Element Syntax always looks similar to this example
Syntax:
<marker id="name"
refX="coordinate"
refY="coordinate"
markerWidth="length"
markerHeight="length"
markerUnits="strokeWidth | userSpaceOnUse"
viewBox="min-x min-y width height"
orient="auto | angle"
style-attribute="style-attribute">
<!-- marker content here -->
</marker>
What You Need To Use This Book
• Basic understanding of HTML XML
• One of the following SVG Viewer ( See Appendix C)
7. Learn SVG Chapter 1 Introduction 6
Chapter 1
"Make everything as simple as possible, but not simpler."
- Albert Einstein (1879-1955)
Chapter Objectives
• History of SVG
• SVG is XML
• Raster vs. Vector Graphics
• SVG Concepts
• Viewing SVG
• Creating SVG
Introduction
Learn SVG explores the world of Scalable Vector Graphics. SVG is a graphics format that
has been developed as an open source industry standard graphics format and is maintained by
the W3C. SVG describes graphics using XML grammar. SVG interrogates and conforms
with Web standards such as DOM, XML Namespace, Xpath, Xlink and XPointer and many
others that will addressed in this book. The key to SVG is in fact that each of these robust
standards seamlessly works together with SVG. This allows SVG to be stylized, dynamic,
animated, interactive, extensible and an all-around extraordinary graphics format. In SVG we
find the culmination of the next generation of the Web. This is why SVG makes for a truly
astounding and robust presentation layer for the Web.
We have a lot to cover so let’s start with some inspiration. You will need a SVG Viewer to
view figure 1.1. If you do not have a SVG Viewer Please see Appendix C to help you pick
one out.
Figure 1-1: Inspirational SVG image
8. Learn SVG Chapter 1 Introduction 7
How SVG Emerged
There has been a lot of excitement and generated by this graphics format as it has become a
vital part of Web development. SVG is a creation of the World Wide Web Consortium
(W3C), which is an open–standards international industry consortium that has been formed to
develop open-source standards for the Web.
SVG emerged through the work of a The World Wide Web Consortium working group that
was formed back in 1998. The W3C SVG Working Group continues to improve the
capabilities of SVG. W3C working groups are comprised of representatives from a variety of
industries across the world. There are over twenty members of the SVG Working Group
including some of the top industry leaders such as: Adobe Systems, Sun Microsystems, IBM,
Corel, Macromedia, Hewlett–Packard, Microsoft, and AOL/Netscape.
With the development of XML the opportunity arose to create an XML-based language to
describe graphics. The W3C gave the SVG working group the goal of developing a XML
graphic format that could produce top quality graphics. SVG does just that and a great deal
more as we will be discovering throughout this book.
In 1998, the W3C was presented with two proposals for new graphics formats. Both
Precision Graphics Markup Language (PGML) and Vector Markup Language (VML)
are described using an XML grammar. Adobe proposed PGML based on its experience with
Postscript and PDF, PGML is in fact generated from PDF files. Support for Microsoft’s
submission, VML, has been realized in Internet Explorer, but development stopped in the
autumn of 1998.
After much consideration the W3C decided to combine the best aspects of both of the PGML
and VML languages into a new language called SVG.
On August 2nd and again on November 2nd of 2000 the W3C upgraded SVG to Candidate
Recommendation and urged developers to begin implementing SVG. One and half years
after the first SVG Working Draft was published, Chris Lilley, the Activity leader and chair of
the SVG Working Group, announced the release of the SVG 1.0 specification as a W3C
Recommendation. The SVG 1.0 specification was finalized by the W3C on September 4,
2001. This means that SVG has been thoroughly tested and is an industry standard that is
ready for full-scale implementation. The SVG Working Group is continuing to expand the
capabilities of SVG in their work on SVG 1.1 ,SVG 2.0 specifications and the SVG Mobile ,
Tiny profiles.
The SVG Working Group is continuing to expand the capabilities of SVG. In Jan of 2003
SVG 1.1 and SVG Mobile specifications were released. Work continues on the long
anticipated SVG 1.2, SVG 2.0 and SVG Print specifications that will probably support highly
desired features such as text-wrapping.
9. Learn SVG Chapter 1 Introduction 8
This is the current SVG Roadmap.
Document WD1 WD2 LC Ends CR PR REC
SVG 1.0 - - - - - - 5 Sep
2001
SVG 1.1 - - - - - 11 Nov 14 Jan
2002 2003
SVG Mobile - - - - - 11 Nov 14 Jan
Profiles 2002 2003
SVG 1.2 11 Nov [Jan [May [July [August [Dec [Jan
2002 2003] 2003] 2003] 2003] 2003] 2004]
SVG Print [Jan - - - - - -
Requirements 2003]
SVG Print [Mar - - - - - -
2003]
Authoring [Feb - - - - - -
Tool 2003]
Guidelines
Accessibility [Mar
Techniques 2003]
Legend: WDn = n'th working draft; LC = last call for comments (i.e., last
WD); Ends = deadline for LC comments; CR = Candidate Recommendation;
PR = Proposed Recommendation; REC = W3C Recommendation.
[Feb '02] = expected date.
SVG is XML
SVG is based on eXtensible Markup Language (XML) grammar, the standard markup for
Web documents in the 21st century. Other XML-based applications that are in use or under
development include XHTML, MathML, SMIL, X3D, XFORMS, and many others. Rapid
adoption and application of these technologies has already occurred and offer a state-of-the-
art foundation for documents. As you can see, SVG is built with the future of the Web in
mind.
SVG being an application of XML benefits from all the advantages XML brings. SVG is text-
based and open source web standard.
If you are familiar with XML you will see that there really is nothing new about the structure
of the SVG language. As you can see in figure 1-1, SVG is composed of content marked–up
within “tags” which are made up of “elements” and “attributes”.
The following diagram examines components of the SVG language using XML grammar and
syntax:
10. Learn SVG Chapter 1 Introduction 9
Figure 1-2: SVG syntax and basic grammar
SVG is Efficient
SVG is a text based graphic format. This means that SVG files are just plain old text files.
SVG graphics files are very small compared to other graphic file formats.
The image in figure 1.1 ends up having a file size of around 2.3 KB. (Note that there is a
reference to one external jpeg image that has been positioned over the letter "G" that is really
making the file size huge.) If we use gzip to compress the SVG file then it ends up being less
than 1 KB. This is tiny!
You will find this to be especially astonishing when you discover that this image can be
infinitely scaled without any loss in image quality, except for any referenced raster content.
Also, because SVG conforms to the Document Object Model (DOM) and style sheets, all of
the elements and attributes of figure 1.1 can be efficiently accessed and manipulated. If you
wanted any of the objects in the graphic to move, you can just add some animation elements
or script at almost no cost to size of the file.
SVG is Powerful
For the past ten or more years programmers have been thinking about how best to introduce
two-dimensional vector graphics to end users. The benefits of using vector graphics include
greater interaction and analysis with the user interface including such functionality as
panning, zooming and best of all programmatic animation. One excellent aspect of SVG is
that once downloaded to the client it can be reused on a page at different sizes or with
different features and even different data.
A host of technologies can work together to make SVG the ultimate graphics format and
XML application. For example, ECMAScript, CSS, XSLT and XSL-FO can be applied to
SVG on the client to provide truly dynamic, user-friendly and interactive Web documents.
Also, since SVG conforms to the XML specification it is also extensible which means that
SVG can be viewed inline with other XML-based languages / applications such as XHTML,
SMIL, XFORMS and MathML.
SVG has several key advantages over other graphics formats used on the Web. These
include:
11. Learn SVG Chapter 1 Introduction 10
• Scalable – SVG images do not degrade upon “panning” and “zooming”, which is ideal
for many things such as portable devices, mapping, charting, printing at any size and
technical diagrams.
• Plain text – Developers and designers can edit SVG code using a wide variety of tools.
• Smaller file sizes – Compression techniques and the effectiveness of SVG's
vocabulary can make SVG files very small and ideal for use on the Web.
• Searchable - SVG content is text and therefore can be “searched” and “indexed”.
• Infinite color and font options - 16 million colors and support for embedded fonts
which means what is seen on the screen will look exactly the same when printed
• Native image effects – drop-shadows, blurs, and lighting effects can be applied when
SVG is being rendered on the client side. The dynamic filter effects of SVG are a true
breakthrough for graphics on the Web.
• Animation – SVG includes built-in elements for declarative animation effects and can
also be animated through the SVG DOM with script.
• Interaction – Script can control animation and allow for advanced user-friendly
interactivity.
• XML - Compatibility with XML, HTML4, XHTML as well as conformance to CSS,
XSL-FO, and the DOM means that SVG is extensible, can be styled , scriptable,
extensible, interactive and integrates easily with other XML languages.
SVG is Scalable (Vector Graphics)
Until recently Web developers only had the option of using these bitmap graphic formats to
render images in browsers. The main bitmap graphic formats that are used on the Web today
are:
• Graphics Interchange Format (GIF)
• Joint Photographic Experts Group (JPEG)
• Portable Network Graphics (PNG)
Bitmaps graphics belong to a class of computer graphics called raster graphics. Raster
graphics are displayed by a method of filling in a matrix of pixels, which requires storing the
information for every pixel of the graphic.
Vector graphics such as SVG and SWF formats are different beasts altogether belonging to
another class of graphics that are rendered using short line segments called vectors. Also,
vector graphics contain geometric objects such as lines and curves.
12. Learn SVG Chapter 1 Introduction 11
Although bitmap images do work very well in many situations, vector graphics open up a
whole new world of possibilities in Web graphics. For example compare the following two
screenshots of the same SVG image. This is the original view of this vector graphic.
Figure 1-3: Original size Figure 1-4: Size after zooming in
Notice that we have not lost any quality. This is because the vector-based viewers are able to
recalculate how the graphic should look based on the textual description of the circle shape
that is found inside of the SVG graphic. This is a key advantage of SVG and raster graphic
formats.
Because vector graphics are defined programmatically they provide a more efficient means
for rendering print and animation, as well as adding interaction (including panning and
zooming) and analytical capability.
One of the limitations of bitmap images is how they describe graphics. Bitmaps do not
describe graphics as shape elements or objects but instead have to describe each and every
pixel in the image. Bitmaps can make use of efficient compression techniques and can be
streamed because its data is stored serially, however as you will see in these screenshots the
scalability of vector graphics is a tremendous advantage over raster images.
Figure 1-5: Original image
Figure 1-6: Vector image at 300% Figure 1-7: Raster image at 300%
13. Learn SVG Chapter 1 Introduction 12
The raster image becomes very pixilated when it is scaled while the vector image loses
absolutely no image quality! SVG is a Vector graphic format. Now, you know why SVG is
called Scalable Vector Graphics.
The Building Blocks of SVG
Scalable Vector Graphics (SVG) is a completely open standard XML language for describing
two-dimensional graphics using a combination of three types of graphical objects: vector
graphic shapes, images and text. Let’s take a minute to explain in detail what that last
sentence actually means.
SVG is Composed of Graphical Objects
SVG is made up of three types of graphical objects: shape, image and text objects.
Figure 1-8: Graphic Objects in SVG
Shapes in SVG
The following image can be displayed using HTML via the <image> element, or it can be
displayed using SVG via the <circle> element.
Figure 1-9: Circle in SVG
HTML document:
<html>
<head>
<title>Pink Circle</title>
</head>
<body>
14. Learn SVG Chapter 1 Introduction 13
<img src=”circle01.gif” />
</body>
</html>
SVG document:
<?xml version=1.0” ?>
<svg width="100" height="100">
<title>Pink Circle</title>
<circle cx="50" cy="50" r="40" fill="pink" stroke="black"/>
</svg>
So if both documents can produce the same looking circle then what is all this excitement
surrounding the SVG graphic format? What are the kinds of benefits and drawbacks of using
SVG rather than HTML? Those are great question that this book will reveal.
SVG shapes objects include the following elements: <path>, <line>, <rect>, <circle>, <ellipse>,
<polyline> and <polygon>. The <path> element is able to describe more complex shapes using
Cubic and Bezier curves. We will cover Shapes in chapter 2 and the more complex <path>
element in several chapters though out the book.
Shapes are not always the most efficient method of rendering image content. The W3C SVG
Working Group recognized this and provides two more graphic objects to help: Images and
Text. How to inline and embed SVG images will be exported in many chapters.
Images in SVG
In SVG, raster images are actually graphical objects. This gives the developer or end-user the
ability to, for example, apply client-side animation and filter effects on specific raster images
as we saw in the figure 1.1. Notice that the raster image in the top right corner is semi-opaque!
We will discover how this was accomplished in the next chapter. SVG Recommendation
states that an SVG Viewer has to support two raster formats.
The two formats are JPEG and PNG. The SVG Viewer can support more raster formats.
Text in SVG
After shapes and images, the third graphical object in SVG is text. As a graphical object, text
can be programmatically controlled and manipulated through script just like shapes and
images!
SVG text is composed of font characters that technically are in turn comprised of glyphs. We
will describe the difference between fonts and glyphs and many other interesting features of
using text in SVG in greater detail in Chapter 5.
SVG in Practice
15. Learn SVG Chapter 1 Introduction 14
SVG is already taking off as demonstrated in the computer industries widespread support of
SVG in major product lines, third-party tools and Web applications. Please see Appendix C
for a listing of Products, third-party tools and Web applications.
Viewing SVG
Before we start working with SVG let’s make sure we’re all on the same page. A prerequisite
for this book is that you have the resources in place to at least be able to view SVG. Please see
Appendix C to help you quickly pick out a SVG Viewer.
Creating SVG
Hand-coding SVG
So now that we know what SVG is and what SVG is made of let’s start creating some SVG of
our own. The quickest and easiest way to ease into understanding SVG is by hand-coding
your first few SVG graphics. Hand-coding SVG graphics is actually not too difficult so take
out our magic keyboard, open your favorite text editor and follow along as we journey into
the land of Scalable Vector Graphics.
This next example will be very short and simple – black rectangle.
One of SVG's greatest assets lies in its ease of use. SVG is quite simple and you can create
SVG without the use of a graphical authoring environment. Our first example of SVG shows
the basic structure of a complete SVG graphic/document.
Line 1: <?xml version=”1.0” ?>
Line 2: <svg>
Line 3: <rect x="100" y="50" width="100" height="100" />
Line 4: </svg>
This code creates this shape:
figure 1-10: rectangle with default fill
Line 1: The XML Declaration and the XML version of this document.
Line 2: Opens the SVG document
Line 3: Creates an SVG shape using the <rect> element, specifies:
a: top left corner of rectangle positioned at ‘x’ and ‘y’ attribute values
b: specifies the width and height of the rectangle by setting the ‘width’ and
‘height’ attribute values.
16. Learn SVG Chapter 1 Introduction 15
Line 4: Closes the SVG document
Notice that the default fill color is black. We will cover styling in detail in Chapter 5.
Summary
Congratulations! You have just created an SVG-powered Web page. If you liked this
exercise then just hold tight because we will continue to expand your SVG knowledge. If you
found this exercise to be somewhat boring we will quickly be moving on to bigger and better
things! Beauty is in the eye of the beholder.
Up to this point we have quickly covered the main questions involved in creating, viewing
and editing SVG without going into undue depth. In the next section we will continue to
partake of the SVG feast by analyzing shapes, text, and images.
As mentioned earlier SVG is ideally suited for use on the Web, so in this book we will be
dealing with all aspects of using SVG on the Web. Also found in this book are a number of
great SVG images with the accompanying source code that should be of great value to both
designers and developers.
In Chapter 1 we learned what SVG is and began to familiarize ourselves with the tools of
SVG. We also quickly covered how to create and view SVG output.
Hopefully you are having fun. Do always remember that it is a state of mind. And as Yoda
says, “Your focus determines your reality”.
17. Chapter 2 Basic Shapes
"What you see is all you get."
- Brian Kernighan4
"In theory, there is no difference between theory and
practice. But, in practice, there is."
- Jan L.A. van de Snepscheut
"Form must follow function."
- Le Corbusier
Chapter Objectives
• The SVG Header
• The ‘svg’, ‘desc’ and ‘title’ Elements
• Presentation Attributes: Stroke and Fill
• Basic Shapes ‘line’, ‘circle’, ‘rect’, ‘ellipse’,
‘polyline’, ‘polygon’
• Basic Shape Reference
• The ‘image’ Element
Overview
If you will recall from Chapter 1, SVG offers three types of graphical objects: shapes, images,
text. In this chapter we will be exploring basic SVG document structure, basic presentation
attributes and basic shapes, images and a little about text. We will cover all aspects of text
processing in depth in Chapter 5. Mastery of these concepts will provide us with the building
blocks for most everything that we will do with SVG.
The SVG Header
The code below demonstrates the structure of a complete SVG document. The document is
composed of the XML declaration, the DOCTYPE declaration, and the SVG Document
Fragment.
This is the complete SVG header:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="350" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- content goes here -->
</svg>
The first line of the SVG header is the standard XML processing instruction that efficiently
states this document conforms to the XML 1.0 specification, uses UTF-8 character encoding
and depends on a Document Type Definition (DTD) external to the document to parse
correctly. Where is this DTD located? The second line holds the secret to this information. In
the second line, the ‘DOCTYPE’ states where the DTD is located and the name of the
document element it will be applied to. In this case, the DTD is applied to a document
element named ‘svg’. The DTD provides the grammar and rules for the document.
18. Learn SVG Chapter 2 Basic Shapes 2
Let’s take a look at a sample that uses the complete SVG header and adds some SVG
elements:
Figure 2-1. Line and circle with style
<?xml version=”1.0” encoding=”UTF-8” standalone=”no”?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="350" height="300">
<title>SVG - Introduction</title>
<desc> This graphic demonstrates many exciting features of SVG.</desc>
<circle cx="50" cy="70" r="30" fill="grey"
fill-opacity="0.4" stroke="darkslategrey"
stroke-width="2">
<desc>Basic circle</desc>
</circle>
<line x1="72" y1="50" x2="110" y2="10" stroke="darkslategrey"
stroke-width="2"/>
</svg>
Now, let’s take a closer look at the ‘svg’ element and new SVG elements we added to the
code.
The basics of the <svg> element
After the doctype declaration is the ‘svg’ element. In our example, the ‘svg’ element contains
all other elements. This makes the ‘svg’ element the document element of the document.
<?xml version=”1.0” encoding=”UTF-8” standalone=”no”?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="350" height="300">
<!-- content goes here -->
</svg>
You may have noticed the attributes on the ‘svg’ element. What do they do? The ‘width’ and
‘height’ attributes describe the width and height of the SVG graphic. The height and width
attributes can also be used on some graphical objects such as rectangle elements.
2
19. Learn SVG Chapter 2 Basic Shapes 3
Figure 2-2. Rect with ‘width’ and ‘height’ attributes
<?xml version=”1.0” encoding=”UTF-8” standalone=”no”?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="350" height="300">
<rect x="40" y="20" width="140" height="70"
stroke="black" fill="lightgrey" />
</svg>
There are many more properties that can be defined on the ‘svg’ element. We will explore
these properties in the next chapter and throughout the book.
Now, let’s look at the new SVG elements we added to the document. You will see 'title',
'desc', ‘circle’, ‘line’ element. We will look at ‘title’ and ‘desc’ in this section and will cover
‘circle’ and ‘line’ later on in the chapter.
The basics of ‘title’ and ‘desc’
Looking again at the code example you will see in bold ‘title’ and ‘desc’ elements:
<?xml version=”1.0” encoding=”UTF-8” standalone=”no”?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="350" height="300">
<title>SVG - Introduction</title>
<desc> This graphic demonstrates many exciting features of SVG.</desc>
<circle cx="50" cy="70" r="30" fill="grey"
fill-opacity="0.4" stroke="darkslategrey" stroke-width="2">
<desc>Basic circle</desc>
</circle>
<line x1="72" y1="50" x2="110" y2="10" stroke="darkslategrey"
stroke-width="2"/>
</svg>
In SVG, all elements can have the ‘title’ and ‘desc’ elements as children. This allows every
element can have a title and description. The content of ‘title’ and ‘desc’ will not be displayed
to the screen.
3
20. Learn SVG Chapter 2 Basic Shapes 4
An interesting note in the SVG recommendation leaves the implementation of these elements
up to the implementers of the SVG processor. This means that some viewers may implement
functionality for the ‘title’ and ‘desc’ attributes, some will not. For example, A SVG viewer
may use the ‘desc’ element for a “tooltip” and the ‘title’ element that is the child of a ‘svg’
documents element for the title of the web page. Note that ‘title’ element in SVG behaves
differently then ‘title’ attribute of HTML. But do not worry, using the SVG’s Document
Object model and scripting we will show you how to create your own “tooltips”.
Note to reader
For the rest of the book we will leave out the complete SVG header to help us focus on the
SVG elements and attributes and improve the readability of the code. That being said, we
highly recommended that you always use the complete header in your own documents. So for
readability each of the SVG code samples will take this form:
<?xml version="1.0"?>
<svg width="350" height="300">
<!-- content goes here -->
</svg>
Units of Measurement: Throughout the rest of the book no CSS units (pt, mm, px, etc.) will
be used. This is due to the fact that the SVG working group is considering better alternatives
to CSS units in future SVG versions. The SVG working group recommends avoiding these
units today and so we will follow that recommendation. Instead we will not specify any unit
type so that our SVG graphics will default to what is called user units. We will always refer
to our coordinates as user “units” rather than any specific CSS unit of measurement.
Style Properties
Graphical objects can be much more useful when they have been stylised. In this section we
will show how to apply a few of the most common style properties to shapes using
presentation attributes. You can find a complete listing of all of SVG’s presentation
attributes in Appendix B.
Styling with CSS vs. Presentation Attributes
Style can be applied to SVG in a number of ways. Throughout this book we will be using
presentation attributes rather than CSS to stylize our images.
Presentation attribute have the syntax:
style = “name of style”
CSS style has this syntax:
style = “name of style : value”
Presentation attributes such as fill="red" are used exclusively in code examples because they are
easier to read and understand than CSS styles such as style="fill:red". Styling with CSS will be
covered in Appendix B.
4
21. Learn SVG Chapter 2 Basic Shapes 5
Colors
We can not talk about 'fill' and ‘stroke’ property until we address how to specify a color.
Color in SVG was adopted from the CSS specification which means that everything you
learned about CSS color is the same for SVG! There are two main ways to define a color and
they are through color keyword names or through the RGB color model.
If you want to specify that a graphical object have its interior color be “lightgray” this is all
you need to do.
Figure 2-3. Rect with fill value
<svg width="350" height="300">
<rect x="50" y="30" width="200" height="100" fill=”lightgray” />
</svg>
Alternatively, colors can be specified using three- or six-digit hexadecimal RBG notation
#rgb, rgb(000,000,000) or rgb(0%,0%,0%). For example each of these notations specifies a
color value that is equal to the color ‘white’:
#FFF = #FFFFFF = rgb(255,255,255) = rgb(100%,100%,100%)
In SVG syntax, the color “white” would look like this:
<rect x="50" y="30" width="200" height="100" fill=”#fff” />
<rect x="50" y="30" width="200" height="100" fill=”#ffffff” />
<rect x="50" y="30" width="200" height="100" fill=”rgb(255,255,255)” />
<rect x="50" y="30" width="200" height="100" fill=”rgb(100%,100%,100%)” />
We have included a list of SVGs color keyword names and hexadecimal RBG notation in a
color chart in Appendix A.
The ‘fill’ and ‘stroke’ properties
Let’s take a look at how to use the ‘stroke’ and ‘fill’ presentation attributes. All of SVG’s
graphical objects have an outline and an interior space. The outline is called the ‘stroke’ and
the interior is called the ‘fill’.
We can set an object’s ‘stroke’ and ‘fill’ property values through presentation attributes.
‘fill’ Properties
When you use the ‘fill’ property it will fill the interior of an graphic object with a color,
gradient or pattern. We will cover gradient and pattern fully in future chapters. The ‘fill’
attribute specifies the color of the graphic objects filled region. The ‘fill’ property is used to
fill graphical elements interior with the specified ‘paint’ value.
5
22. Learn SVG Chapter 2 Basic Shapes 6
Fill Property Reference Table
The ‘fill’ properties include:
fill
fill-opacity
fill-rule
Each of these properties is defined in greater detail here.
Fill Properties:
Property Description
fill A color value that defines the color of a shape or text interior.
A number between 1.0 and 0 with 1.0 being opaque and 0 being
fill-opacity
transparent that defines the opacity of a shape or text interior.
A value of ‘nonzero’ or ‘evenodd’ that is used to determine interior
fill-rule
for intersecting lines.
fill-opacity
This is syntax definition for the ‘fill’ property.
'fill'
Value: <paint>
Initial: black
Applies to: Shapes and textual content
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes
Each of these ‘fill’ color attributes are demonstrated in figure 2-3.
Figure 2-4. Fill property colors
<svg width="350" height="300">
<rect x="10" y="10" width="40" height="40" fill="cornflowerblue"/>
<rect x="30" y="25" width="40" height="40" fill="#64DDDD"/>
6
23. Learn SVG Chapter 2 Basic Shapes 7
<rect x="50" y="40" width="40" height="40" fill="rgb(100, 100, 237)"/>
<rect x="70" y="55" width="40" height="40" fill="rgb(50%,50%,50%)"/>
</svg>
fill-opacity
Value: <opacity-value> | inherit
Initial: 1
Applies to: shapes and text content elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes
The ‘fill-opacity’ property sets the amount of opacity the interior of a graphical object will
have.
The default opacity value is 1 (opaque) with 0 (transparent) being the lowest possible value
for this property. In figure 2-4 we have set varying opacity values.
Figure 2-5. Fill-opacity property
<svg width="200" height="200">
<rect x="5" y="5" width="50" height="50"
fill="cornflowerblue" fill-opacity=”0.7” />
<rect x="25" y="25" width="50" height="50"
fill="#64DDDD" fill-opacity=”0.5” />
<rect x="45" y="45" width="50" height="50"
fill="rgb(100, 100, 237)" fill-opacity=”0.3” />
<rect x="65" y="65" width="50" height="50"
fill="rgb(50%,50%,50%)" fill-opacity=”0.1” />
</svg>
fill-rule
Value: nonzero | evenodd | inherit
Initial: Nonzero
Applies to: shapes and text content elements
Inherited: Yes
Percentages: N/A
Media: Visual
Animatable: Yes
7
24. Learn SVG Chapter 2 Basic Shapes 8
The ‘fill-rule’ property determines the internal and external portions of a shape. Often this is
straight-forward but this becomes more tricky with complex shapes. This next example
comes straight from the SVG 1.2 Specification.
Figure 2-6. Fill-rule property – ‘nonzero’
<?xml version="1.0" standalone="no"?>
<svg width="12cm" height="4cm" viewBox="0 0 1200 400" version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Example fillrule-nonzero - demonstrates fill-rule:nonzero</desc>
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" />
<defs>
<path id="Triangle" d="M 16,0 L -8,9 v-18 z" fill="black" stroke="none" />
</defs>
<g fill-rule="nonzero" fill="red" stroke="black" stroke-width="3" >
<path d="M 250,75 L 323,301 131,161 369,161 177,301 z" />
<use xlink:href="#Triangle" transform="translate(306.21 249) rotate(72)"
overflow="visible" />
<use xlink:href="#Triangle" transform="translate(175.16,193.2) rotate(216)"
overflow="visible" />
<use xlink:href="#Triangle" transform="translate(314.26,161) rotate(0)"
overflow="visible" />
<use xlink:href="#Triangle" transform="translate(221.16,268.8) rotate(144)"
overflow="visible" />
<use xlink:href="#Triangle" transform="translate(233.21,126.98)
rotate(288)" overflow="visible" />
<path d="M 600,81 A 107,107 0 0,1 600,295 A 107,107 0 0,1 600,81 z
M 600,139 A 49,49 0 0,1 600,237 A 49,49 0 0,1 600,139 z" />
<use xlink:href="#Triangle" transform="translate(600,188) rotate(0)
translate(107,0) rotate(90)" overflow="visible" />
<use xlink:href="#Triangle" transform="translate(600,188) rotate(120)
translate(107,0) rotate(90)" overflow="visible" />
<use xlink:href="#Triangle" transform="translate(600,188) rotate(240)
translate(107,0) rotate(90)" overflow="visible" />
<use xlink:href="#Triangle" transform="translate(600,188) rotate(60)
translate(49,0) rotate(90)" overflow="visible" />
<use xlink:href="#Triangle" transform="translate(600,188) rotate(180)
translate(49,0) rotate(90)" overflow="visible" />
<use xlink:href="#Triangle" transform="translate(600,188) rotate(300)
translate(49,0) rotate(90)" overflow="visible" />
<path d="M 950,81 A 107,107 0 0,1 950,295 A 107,107 0 0,1 950,81 z
M 950,139 A 49,49 0 0,0 950,237 A 49,49 0 0,0 950,139 z" />
<use xlink:href="#Triangle" transform="translate(950,188) rotate(0)
translate(107,0) rotate(90)" overflow="visible" />
8
25. Learn SVG Chapter 2 Basic Shapes 9
<use xlink:href="#Triangle" transform="translate(950,188) rotate(120)
translate(107,0) rotate(90)" overflow="visible" />
<use xlink:href="#Triangle" transform="translate(950,188) rotate(240)
translate(107,0) rotate(90)" overflow="visible" />
<use xlink:href="#Triangle" transform="translate(950,188) rotate(60)
translate(49,0) rotate(-90)" overflow="visible" />
<use xlink:href="#Triangle" transform="translate(950,188) rotate(180)
translate(49,0) rotate(-90)" overflow="visible" />
<use xlink:href="#Triangle" transform="translate(950,188) rotate(300)
translate(49,0) rotate(-90)" overflow="visible" />
</g>
</svg>
Stroke Properties
When you use the ‘stroke’ property it will stroke the outline of an graphic object with a color,
gradient or pattern. We will cover gradient and pattern fully in future chapters.
There are several stroke-related properties including:
stroke
stroke-width
stroke-opacity
stroke-linecap
stroke-linejoin
stroke-dasharray
stroke-dashoffset
stroke-miterlimit
Each of these properties is defined in greater detail here.
Stroke Properties:
Property Description
stroke A color value that defines the color of a shapes or text stroke.
A number or percentage value that defines the width of a shapes
stroke-width
or text stroke.
A number between 1.0 and 0 with 1.0 being opaque and 0 being
stroke-opacity
transparent that defines the opacity of a shapes or text stroke.
A set of user coordinate numbers that define the repeating dash
stroke-dasharray
and gap length of a stroke.
A value of ‘butt’ (default), ‘round’ or ‘square’ that specifies the
stroke-linecap
stroke shape at the end of line segments.
A value of miter (default), round or bevel that indicates the stroke
stroke-linejoin
shapes of the corners of basic shapes and paths.
A number >= less than 1 that defines the limit on the ratio of the
stroke-miterlimit
miter length to the stroke-linewidth.
stroke and stroke-width
Here are the syntax definitions for each of the ‘stroke’ and ‘stroke-width’ properties.
9
26. Learn SVG Chapter 2 Basic Shapes 10
'stroke'
Value: <paint> (See Specifying paint)
Initial: none
Applies to: shapes and text content elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes
'stroke-width'
Value: <length> | inherit
Initial: 1
Applies to: shapes and text content elements
Inherited: yes
Percentages: Yes
Media: visual
Animatable: yes
In this example we have used presentation attributes to apply stroke color and stroke-width
properties to the lines.
Figure 2-7. Stroke property
<svg>
<!-- Horizontal Lines -->
<line x1="0" y1="20" x2="100" y2="20"
stroke="darkslategray"/>
<line x1="25" y1="30" x2="125" y2="30"
stroke="darkslategray" stroke-width="4"/>
<line x1="50" y1="40" x2="150" y2="40"
stroke="darkslategray" stroke-width="6"/>
<line x1="75" y1="50" x2="175" y2="50"
stroke="green" stroke-width="8"/>
<line x1="100" y1="60" x2="200" y2="60"
stroke="blue" stroke-width="10"/>
<!-- Diagonal Lines -->
<line x1="0" y1="20" x2="100" y2="60"
stroke="black" stroke-width="1"/>
<line x1="100" y1="20" x2="200" y2="60"
stroke="black" stroke-width="1"/>
</svg>
As you can see, the ‘line’ element has a different ‘stroke’ color and different ‘stroke-width’.
Each of these properties is used to affect the outline appearance on the graphic object to
which it is applied.
10
27. Learn SVG Chapter 2 Basic Shapes 11
stroke-opacity
Value: <opacity-value> | inherit
Initial: 1
Applies to: shapes and text content elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes
The stroke is always centered on the outline of the graphic object. This means that half of the
stroke is on the inside of the graphic object and the other half of the outline is on the outside
of the graphic object.
Lets look at the next example which makes use of the ‘stroke-opacity’ property:
Figure 2-8. Stroke-width property illustrated using stroke-opacity
<svg width="200" height="200">
<rect x="20" y="20" width="60" height="60"
fill="#CCCCCC" stroke="blue" stroke-width="15"
stroke-opacity="0.2"/>
</svg>
As you can see in the example above, by using the stroke-width and stroke-opacity properties
we can easily create some interesting effects. We have made what seem to be three different
rectangles. When adding style to graphic object some interesting scenarios can develop. For
example, what would happen if the ‘stroke-width’ property value were greater than the
interior space of the graphic object? Try it. As you might have guessed, the stroke can
consume the interior space and completely paint over the shapes fill.
stroke-dasharray
'stroke-dasharray'
Value: none | <dasharray> | inherit
Initial: none
Applies to: shapes and text content elements
11
28. Learn SVG Chapter 2 Basic Shapes 12
Inherited: yes
Percentages: yes (see below)
Media: visual
Animatable: yes (non-additive)
Using just the stroke-dasharray we can create the following types of dot-dash patterns along
the stroke of our shapes.
Figure 2-9. Stroke-dasharray property (dot, dash, dashdot, etc.)
<svg width="350" height="300">
<line x1="40" y1="20" x2="200" y2="20"
stroke-dasharray="1 10" fill="none"
stroke="darkslategray" stroke-width="2" stroke-linecap="round" />
<line x1="40" y1="40" x2="200" y2="40"
stroke-dasharray="10 10 10 10" fill="none"
stroke="darkslategray" stroke-width="2" stroke-linecap="round" />
<line x1="40" y1="60" x2="200" y2="60"
stroke-dasharray="10 10 1 10" fill="none"
stroke="darkslategray" stroke-width="2" stroke-linecap="round" />
<line x1="40" y1="80" x2="200" y2="80"
stroke-dasharray="1 10 10 10 1 10" fill="none"
stroke="darkslategray" stroke-width="2" stroke-linecap="round" />
<line x1="40" y1="100" x2="200" y2="100"
stroke-dasharray="1 10 10 10 10 10" fill="none"
stroke="darkslategray" stroke-width="2" stroke-linecap="round" />
</svg>
Note: When using lines in the Adobe SVG Viewer you will notice that you should always set
the fill=”none” to prevent a thin line from being displayed along the length of the line.
stroke-dashoffset
Value: <length> | inherit
Initial: 0
Applies to: shapes and text content elements
Inherited: yes
Percentages: see prose
Media: visual
12
29. Learn SVG Chapter 2 Basic Shapes 13
Animatable: yes
The stroke-dashoffset can be used to effectively move the start position of the ‘stroke-
dasharray’. The ‘stroke-dasharray’ property also allows the stroke to be segmented as shown
in this example.
Figure 2-10. Stroke-dasharray and stroke-dashoffset design
<svg width="300" height="300">
<rect x="10" y="10" width="70" height="70"
fill="pink" stroke="blue" stroke-width="5"
stroke-dasharray="35 35" stroke-dashoffset="-17.5"/>
<line x1="90" y1="45" x2="215" y2="45"
stroke-width="10" stroke="black"
stroke-dasharray="2 13"/>
<line x1="120" y1="80" x2="215" y2="45"
stroke-width="2" stroke="black"
stroke-dasharray="1 10 5 10"/>
<line x1="120" y1="10" x2="215" y2="45"
stroke-width="2" stroke="black"
stroke-dasharray="1 10 5 10"/>
</svg>
In the example above the stroke-dashes on the rectangle have been offset using the ‘stroke-
dashoffset’ property so that they are centered along the length of rectangle’s sides.
Using the ‘stroke-dasharray’ property on two line elements we can even create a grid like this.
Figure 2-11. Grid using stroke-dasharray
<svg width="100" height="100">
<line x1="0" y1="50" x2="100" y2="50"
stroke-width="100" stroke="black"
stroke-dasharray="2 18" />
<line x1="50" y1="0" x2="50" y2="100"
stroke-width="100" stroke="black"
stroke-dasharray="2 18" />
</svg>
13
30. Learn SVG Chapter 2 Basic Shapes 14
The ‘stroke-dashoffset’ property is illustrated more clearly in this next example.
Figure 2-12. Stroke-dashoffset property
<svg width="350" height="300">
<rect x="40" y="10" width="30" height="20"
stroke="black" stroke-width="0.75"
stroke-dasharray="10 10 10 10" stroke-dashoffset="0"
fill="silver" fill-opacity="0.4" />
<rect x="90" y="10" width="30" height="20"
stroke="black" stroke-width="0.75"
stroke-dasharray="10 10 10 10" stroke-dashoffset="-10"
fill="silver" fill-opacity="0.4" />
<rect x="140" y="10" width="40" height="20"
stroke="black" stroke-width="0.75"
stroke-dasharray="10 10 10 10" stroke-dashoffset="5"
fill="silver" fill-opacity="0.4" />
<rect x="40" y="40" width="140" height="20"
stroke="black" stroke-width="0.75"
stroke-dasharray="6 3 2 3" stroke-dashoffset="20"
fill="silver" fill-opacity="0.4"/>
<rect x="40" y="70" width="140" height="20" rx="5" ry="5"
stroke="darkslategray" stroke-width="2"
stroke-dasharray="10 5 10 5" stroke-dashoffset="500"
fill="silver" fill-opacity="0.4" />
<rect x="40" y="100" width="140" height="20" rx="40" ry="20"
stroke="darkslategray" stroke-width="2"
stroke-dasharray="10 5 10 5" stroke-dashoffset="7"
fill="silver" fill-opacity="0.4" />
</svg>
Both the ‘stroke-dasharray’ and the ‘stroke-dashoffset’ properties are quite useful for designs
and animations, as we will see later in this book.
stroke-linecap
Value: butt | round | square | inherit
Initial: butt
Applies to: shapes and text content elements
Inherited: yes
14
31. Learn SVG Chapter 2 Basic Shapes 15
Percentages: N/A
Media: visual
Animatable: yes
The default ‘stroke-linecap’ property value is ‘butt’ specifies the shape to be used at the end
of open path. Setting the stroke-linecap value to ‘round’ creates a small semi-circle at the end
of the line. The last possible value for the stroke-linecap property is ‘square’ and this extends
the stroke out from the end of the line a distance equal to the ‘stroke-width’ property value.
Figure 2-13. Stroke-linecap property
<svg>
<!-- Line 1 -->
<line x1="20" y1="20" x2="20" y2="120"
fill="black" stroke="indigo" stroke-width="20"
stroke-linecap="butt" />
<!-- Line 2 -->
<line x1="60" y1="20" x2="60" y2="120"
fill="black" stroke="indigo" stroke-width="20"
stroke-linecap="round" />
<!-- Line 3 -->
<line x1="100" y1="20" x2="100" y2="120"
fill="black" stroke="indigo" stroke-width="20"
stroke-linecap="square" />
<!-- Guide Lines -->
<line x1="0" y1="20" x2="120" y2="20"
fill="black" stroke="black" stroke-width="2"/>
<line x1="0" y1="120" x2="120" y2="120"
fill="black" stroke="black" stroke-width="2"/>
</svg>
stroke-linejoin
Value: miter | round | bevel | inherit
Initial: Miter
Applies to: shapes and text content elements
Inherited: yes
Percentages: N/A
Media: visual
Animatable: yes
15
32. Learn SVG Chapter 2 Basic Shapes 16
The default ‘stroke-linejoin’ property value is ‘miter’ which is just a normal “boxed edge”.
SVG also offers a ‘stroke-linejoin’ value of ‘round’ and ‘bevel’ as demonstrated in this
example.
Figure 2-14. Stroke-linejoin property
<svg width="250" height="200">
<rect x="10" y="10" width="50" height="50"
fill="magenta" stroke="black" stroke-width="10"
stroke-linejoin="round" />
<rect x="80" y="10" width="50" height="50"
fill="maroon" stroke="black" stroke-width="15"
stroke-linejoin="bevel" />
<rect x="150" y="10" width="50" height="50"
fill="gray" stroke="black" stroke-width="10"
stroke-linejoin="miter" />
</svg>
We will dig into style in greater depth in Chapter 5. For now let’s move on to SVG Basic
Shape elements.
Basic Shapes
Wherever we live on this planet our environments contain an infinite number of shapes.
Some examples include natural things such as trees, fruits and clouds and also man-made
things like symbols, clothes or computers. SVG allows us to easily model our world using six
predefined intuitive shape elements.
The basic shape elements are:
rect
circle
ellipse
line
polyline
polygon
Each SVG shape has specific attributes that define the dimensions of the shape.
For example, this image was created using two ‘rect’ elements.
16
33. Learn SVG Chapter 2 Basic Shapes 17
Figure 2-15. Basic shapes
<svg width="300" height="300">
<rect x="80" y="10" width="40" height="40"
fill="none" stroke="blue" />
<rect x="40" y="50" width="40" height="40"
fill="none" stroke="red" />
</svg>
Let's cover each of the shape objects in detail.
Lines
The ‘line’ element in SVG takes four geometric attributes:
(x1, y1, x2, y2)
These four geometric attributes define the ‘lines’ elements start-point and end-point vertices.
This is how a line appears in an SVG viewer.
Figure 2-16. Line element diagram
<svg width="350" height="300">
<line x1="30" y1="80" x2="160" y2="20"
stroke="darkslategray" stroke-width="2" stroke-linecap="round" />
</svg>
17
34. Learn SVG Chapter 2 Basic Shapes 18
The first lines start-point begins 30 user units from the left and 80 user units from the top of
the SVG document. The end-point is 160 user units from the left and 20 user units from the
top.
This is the syntax for the ‘line’ element
<line id="name"
x1="coordinate"
y1="coordinate"
x2="coordinate"
y2="coordinate"
style-attribute="style-value"/>
That being said, all of these attributes are actually optional for the line element.
Figure 2-17. Special cases for the line element
<svg width="350" height="300">
<line x1="0" y1="0" x2="0" y2="0"
stroke="darkslategray" stroke-width="2" stroke-linecap="round" />
<line x2="160" y2="20"
stroke="darkslategray" stroke-width="2" stroke-linecap="round" />
</svg>
If either attribute pair is not specified then the values for those attributes are automatically
rendered as if they were equal to zero. Likewise, as you can see in the example above, if the
x1, y1 and x2, y2 value pairs are the same or if they are not specified then the line will not
display.
Line Element Designs
Here are some useful techniques for creating fascinating designs with only one or two ‘line’
elements.
18
36. Learn SVG Chapter 2 Basic Shapes 20
<line x1="10" y1="160" x2="100" y2="160" stroke="darkslategray"
stroke-width="40"
stroke-dasharray="1 1 1 1 1 2 2 2 2 1 1 1 4 1 1 2 2 2 1 1 1 1 1 1 1 1 2
3 1 1 2 1 3 1 1 3 1 2 1 2 1 1"
fill="none" />
<text x="75" y="200" font-size="8" text-anchor="middle">single lines</text>
<line x1="180" y1="31" x2="322" y2="31" stroke="darkslategray"
stroke-width="42" stroke-dasharray="2 18"
fill="none" />
<line x1="251" y1="10" x2="251" y2="52" stroke="darkslategray"
stroke-width="142" stroke-dasharray="2 18"
fill="none" />
<line x1="180" y1="70" x2="320" y2="70" stroke="darkslategray"
stroke-width="20" stroke-opacity="0.5"
stroke-dasharray="20 20" fill="none" />
<line x1="180" y1="70" x2="320" y2="70" stroke="silver"
stroke-width="20" stroke-opacity="0.5"
stroke-dasharray="20 20" stroke-dashoffset="20" fill="none" />
<line x1="230" y1="130" x2="270" y2="130" stroke="darkslategray"
stroke-width="40" stroke-opacity="0.7"
stroke-linecap="round" fill="none" />
<line x1="250" y1="110" x2="250" y2="150" stroke="darkslategray"
stroke-width="40" stroke-opacity="0.7"
stroke-linecap="round" fill="none" />
<text x="250" y="200" font-size="8" text-anchor="middle">two lines
each</text>
</svg>
Circles
The circle element takes three geometric attributes: ‘cx’, ‘cy’, and ‘r’)
The ‘cx’ and ‘cy’ values specify the location of the middle of the circle while the ‘r’ value
specifies the radius of the circle.
For example if you want to create a circle with a diameter of 80 user units then you need to
set the value of the ‘r’ attribute equal to 40 as in this example.
Figure 2-19. Circle element diagram
20
37. Learn SVG Chapter 2 Basic Shapes 21
<svg width="350" height="300">
<circle cx="100" cy="50" r="40"
stroke="darkslategrey" stroke-width="2"
fill="grey" fill-opacity="0.4"/>
</svg>
This is the syntax for the ‘circle’ element.
<circle id="name"
cx="coordinate"
cy="coordinate"
r="length"
style-attribute="style-value"/>
The ‘r’ attribute radii parameter is required for rendering the circle element in SVG. If the
‘cx’ and ‘cy’ attributes are not specified then the circles center point is assumed to be (0, 0).
However, if the ‘r’ attribute is not specified or is set equal to zero then the circle will not
appear in the image as shown in this example.
Figure 2-20. Circle designs
<svg width="350" height="300">
<!-- Points -->
<circle r="0"
fill="black" stroke="black"/>
<circle cx="10" cy="10" r="3"
fill="black" stroke="black"/>
<circle cx="30" cy="10" r="5" fill="black" stroke="red"
stroke-width="2"/>
<circle cx="50" cy="10" r="7" fill="black" stroke="red"
stroke-width="2"/>
<!-- Circles -->
<circle cx="0" cy="50" r="20"
fill="orange" stroke="black" stroke-width="3" />
<circle cx="70" cy="50" r="30" fill="grey" stroke="black"
stroke-width="3" />
<circle cx="120" cy="50" r="40" fill="grey" fill-opacity="0.5"
stroke="black" stroke-width="3"/>
<circle cx="200" cy="50" r="50" fill="grey" fill-opacity="0.3"
stroke="black" stroke-width="3"/>
</svg>
The ‘circle’ element can be used as the basis for buttons, wheels, gears, bubbles, people or
even planets as we’ll see later in this book.
Circle Element Designs
21
38. Learn SVG Chapter 2 Basic Shapes 22
Here are some useful techniques for creating fascinating designs using only one or two
‘circle’ elements.
Figure 2-21. Amazing shapes with the circle element
There is nothing up my sleeves. See the code for yourself!
<svg width="800" height="600" viewBox="0 0 400 300">
<defs>
<pattern id="gridPattern" x="0" y="0" width="10" height="10"
patternUnits="userSpaceOnUse">
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray"
stroke-width="0.25"/>
</pattern>
</defs>
<rect id="grid" width="350" height="211" stroke="gray" stroke-width="0.1"
fill="url(#gridPattern)" />
<circle cx="40" cy="40" r="20" stroke="darkslategray" stroke-width="20"
stroke-opacity="0.5" fill="lightslategray" fill-opacity="0.5" />
<circle cx="120" cy="40" r="20" stroke="darkslategray" stroke-width="10"
stroke-dasharray="1.75 8.72" fill="lightslategray"
fill-opacity="0.5" />
<circle cx="40" cy="100" r="10" stroke="darkslategray" stroke-width="20"
stroke-dasharray="15.708 15.708" stroke-dashoffset="7.854"
fill="lightslategray" fill-opacity="0.5"/>
<circle cx="120" cy="100" r="10" stroke="darkslategray" stroke-width="20"
stroke-dasharray="47.124 15.708" stroke-dashoffset="7.854"
fill="lightslategray" fill-opacity="0.5"/>
22
40. Learn SVG Chapter 2 Basic Shapes 24
Rectangles take four geometric attributes:
(x, y, width, height)
The ‘x’ (distance from the left) and ‘y’ (distance from the top) attributes define the position of
the top-left corner of the rectangle while the ‘width’ and ‘height’ attributes define the breadth
and girth of this two dimensional object.
Figure 2-22. Rectangle element diagram
<svg width="350" height="300">
<rect x="40" y="20" width="140" height="70"
stroke="black" stroke-width="0.75" stroke-dasharray="6 3 2 3"
fill="none" />
<rect x="40" y="20" width="140" height="70" rx="40" ry="20"
stroke="darkslategray" stroke-width="2"
fill="lightgray" fill-opacity="0.4" />
</svg>
This is the syntax of the ‘rect’ element.
<rect id="name"
x="coordinate"
y="coordinate"
width="length"
height="length"
style-attribute="style-value"/>
When no coordinates are specified the element's top left corner aligns with the image area's
top left corner. The ‘rx’ and ‘ry’ geometric attributes are optional but they can be used define
the distance that should be "rounded off" from each of the four corner edge's of the rectangle
in the horizontal (rx) and vertical (ry) directions. For example take a look at this next SVG
image.
24
41. Learn SVG Chapter 2 Basic Shapes 25
Figure 2-23. Rectangle element designs
<svg width="500" height="300">
<!-- Elliptical Rectangles -->
<rect x="30" y="45" width="80" height="50" rx="50" ry="30"
fill="lightgrey" stroke="black" stroke-width="1"/>
<rect x="0" y="40" width="90" height="60" rx="40" ry="30"
fill="white" stroke="none"/>
<!-- Horizontal Rectangle -->
<rect x="50" y="45" width="100" height="50" rx="10"
fill="none" stroke="black" stroke-width="2"/>
<!-- Verticle Rectangle -->
<rect x="20" y="20" width="50" height="100" rx="10" ry="10"
fill="peachpuff" stroke="forestgreen" stroke-width="2"/>
</svg>
Also worth noting is that if only the ‘rx’ attribute or if only the ry attribute if specified then
the svg viewer will assume that both the ‘rx’ and ‘ry’ attribute value are the same. That is, if
‘rx’ is set to 5 user units but ‘ry’ is not specified then both ‘rx’ and ‘ry’ will be equal to 5 user
units. This is demonstrated in the rectangle element that is horizontal in the example above.
25
42. Learn SVG Chapter 2 Basic Shapes 26
Ellipses
The ‘ellipse’ element takes four geometric attributes: ‘cx’, ‘cy’, ‘rx’ and ‘ry’.
Figure 2-24. Ellipse element diagram
<svg width="350" height="300">
<ellipse cx="110" cy="55" rx="70" ry="35"
stroke="darkslategray" stroke-width="2"
fill="lightgray" fill-opacity="0.4" />
</svg>
As the example above clearly defines, the ‘cx’ and ‘cy’ values specify the center position of
the ellipse while the ‘rx’ and ‘ry’ values specify the x-axis and y-axis radius of the ellipse
element.
Here is the syntax for the ‘ellipse’ element.
<ellipse id="name"
cx="coordinate"
cy="coordinate"
rx="length"
rx="length"
style-attribute="style-value"/>
If you want to create a circle with an x-axis diameter of 70 user units then you need to set the
value of the ‘rx’ attribute equal to 35 as in this next example.
Figure 2-25. Ellipse element designs
<svg width="350" height="300">
26
43. Learn SVG Chapter 2 Basic Shapes 27
<!-- Horizontal Ellipse -->
<ellipse cx="70" cy="50" rx="50" ry="20" fill="yellow" stroke="black"
stroke-width="4"/>
<!-- Vertical Ellipses -->
<ellipse cx="180" cy="90" rx="35" ry="60" fill="powderblue" stroke="black"
stroke-width="4"/>
<ellipse cx="180" cy="110" rx="35" ry="60" fill="powderblue" stroke="black"
stroke-width="4"/>
<ellipse cx="180" cy="100" rx="55" ry="60" fill="white" stroke="black"/>
<!-- Circle Ellipse -->
<ellipse cx="70" cy="80" rx="20" ry="20" fill="yellow" fill-opacity="0.4"
stroke="black" stroke-width="4"/>
<!-- Odd Ellipse -->
<ellipse cx="70" cy="150" rx="25" ry="0" fill="yellow" stroke="black"
stroke-width="4"/>
</svg>
The ‘rx’ and ‘ry’ attributes radii attribute are both required for rendering the ellipse element in
SVG. However, if either of these values is set equal to 0 then the ellipse and ends up looking
like a line as shown here.
Figure 2-26. Special cases for the ellipse element
<ellipse cx="110" cy="55" rx="70" ry="0"
stroke="darkslategray" stroke-width="2"
fill="lightgray" fill-opacity="0.4" />
As you can see the horizontal length has been set to zero so the ellipse ends up collapsing
upon itself and therefore renders as if it were a line.
Polygons and Polylines
The polyline and polygon ‘points’ attribute allows for multiple numbers of (x,y) coordinate
pairs. Lets take a look at the example to see what this means.
Figure 2-27. Polygon element diagram
<svg width="350" height="300">
<polygon fill="silver" stroke="black" stroke-width="2"
points="50,100 50,80 120,50 150,20 200,80 200,100" />
27
44. Learn SVG Chapter 2 Basic Shapes 28
</svg>
Note to reader
Make sure you specify an even number of coordinate values. That is, for every x that you
specify be sure to define a corresponding y coordinate. Normally your SVG authoring
environment will handle this for you.
Polygons
Polygons can be used to quickly create a wide variety of shapes as shown here.
Figure 2-28. Polygon element designs
<svg width="350" height="250">
<!-- Triangle -->
<polygon points="175,10 100,60 250,60" fill="darkblue"/>
<!-- Plane -->
<polygon points="73,34 90,50 80,85 40,50" fill="green" stroke-width="1"/>
<!-- Trapezoid -->
<polygon points="150,80 200,80 220,110, 130,110" fill="white" stroke="black"
stroke-width="2"/>
<!-- Octagon -->
<polygon points="47,108 22,133 22,166 47,184 85,184 108,166 108,133 85,108"
fill="darkred" stroke-width="1"/>
<!-- ART -->
<polygon points="150,120 200,120 130,180, 220,180" fill="pink" stroke="black"
stroke-width="2"/>
<polygon points="265,180 300,5 265,5 300,180"
stroke="black" stroke-width="2" fill="lightgrey" />
</svg>
The syntax of the ‘polygon’ element is pretty simple.
<polygon id="name"
points="coordinates"
style-attribute="style-value"/>
Polygon Element Designs
Here are some useful techniques for creating fascinating designs with only one or two
‘polygon’ elements.
28