ananda
Uploaded by
24 SLIDES
396 VUES
240LIKES

Introduction to Scalable Vector Graphics (SVG) in JavaScript

DESCRIPTION

Scalable Vector Graphics (SVG) are a powerful tool for creating 2D graphics with JavaScript and HTML. They are resolution-independent, meaning they can be scaled without losing quality. This lecture covers the basics of SVG, including how to create shapes like circles and rectangles, manage their properties such as color, stroke width, and dimensions, and how to incorporate SVG into web pages. By the end, you’ll understand how to utilize SVG for responsive and dynamic graphics in your web applications.

1 / 24

Download Presentation
Télécharger la présentation

Introduction to Scalable Vector Graphics (SVG) in JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture # 11 JavaScript Graphics

  2. Scalable Vector Graphics (SVG) • Scalable Vector Graphics (SVG), as the name implies, are - scalable (without pixelation): - composed of vectors: - can be created using HTML and javascript - can be read and displayed by Browsers C B A

  3. Scalable Vector Graphics (SVG) • Example: Red Circle with black outline <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>

  4. Scalable Vector Graphics (SVG) • Example: Red Circle with black outline <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> Svg tags

  5. Scalable Vector Graphics (SVG) • Example: Red Circle with black outline <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> Where to find the description of the svg elements we will be using

  6. Scalable Vector Graphics (SVG) • Example: Red Circle with black outline <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> The kind of svg we are drawing

  7. Scalable Vector Graphics (SVG) • Example: Red Circle with black outline <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> . Where to draw it (cx,cy) center x and center y

  8. Scalable Vector Graphics (SVG) • Example: Red Circle with black outline <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> . r Radius, r = 40

  9. Scalable Vector Graphics (SVG) • Example: Red Circle with black outline <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> Color of outline of circle

  10. Scalable Vector Graphics (SVG) • Example: Red Circle with black outline <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> Width of outline of circle

  11. Scalable Vector Graphics (SVG) • Example: Red Circle with black outline <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> Fill color of circle

  12. SVG and XML SVG: Defines graphics in XML format HTML: Designed to display data XML: Designed to transport and store data - the focus is on what data is – it is a data format - XML does not DO anything - XML tags are not predefined – you must define your own tags (or have them defined as in "http://www.w3.org/2000/svg" version="1.1" - XML is designed to be self-descriptive

  13. Scalable Vector Graphics (SVG) • Example 2: <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> </svg> What is it?

  14. Scalable Vector Graphics (SVG) • Example 2: <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/> </svg> What is it?

  15. Scalable Vector Graphics (SVG) • Example 3: <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1; stroke-opacity:0.9"/> </svg> What about this?

  16. Scalable Vector Graphics (SVG) • Example 3: <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1; stroke-opacity:0.9"/> </svg> What about this?

  17. Scalable Vector Graphics (SVG) • Example 4: <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/> </svg> Or this?

  18. Scalable Vector Graphics (SVG) • Example 4: <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/> </svg> Or this?

  19. Scalable Vector Graphics (SVG) • Example 4: <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/> </svg> Or this? What does this do?

  20. Scalable Vector Graphics (SVG) • Example 4: <svgxmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/> </svg> Or this? Defines the radius of the corner rounding

  21. Scalable Vector Graphics (SVG) • Example 5: Creating a Canvas to draw on: <svg width=600 height=400 xmlns="http://www.w3.org/2000/svg"> </svg> 600 The size of the canvas 400

  22. Scalable Vector Graphics (SVG) • Example 6: Text on a rectangle: <svg width=600 height=400 xmlns="http://www.w3.org/2000/svg"> </svg> 600 The size of the canvas 400

  23. Scalable Vector Graphics (SVG) • Example 5: Rotating a shape: - apply a single attribute to a shape (or group of shapes) <rect x="50" y="50" width="50" height="50"/> <rect x="150" y="50" width="50" height="50" transform="rotate(45 175 75)"/> Rotate 45 degrees around this center

  24. Other shapes, operations See http://www.w3schools.com/svg/default.asp

More Related
SlideServe
Audio
Live Player
Audio Wave
Play slide audio to activate visualizer
Slide 1

Sea Ice

Slide Player

AI NARRATOR Slide 1 of 12

Sea Ice

0:00 0:15