All Courses
Get the App Signup / Login
Sign in Open App
Class 3 Exam  >  Class 3 Notes  >  HTML for Junior Classes  >  HTML SVG Graphics

HTML SVG Graphics | HTML for Junior Classes - Class 3 PDF Download

SVG defines vector-based graphics in XML format.

What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define graphics for the Web
  • SVG is a W3C recommendation

The HTML <svg> Element

The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Browser Support

The numbers in the table specify the first browser version that fully supports the <svg> element.

HTML SVG Graphics | HTML for Junior Classes - Class 3

SVG Circle

HTML SVG Graphics | HTML for Junior Classes - Class 3

Example

<!DOCTYPE html>

<html>

<body>


<svg width="100" height="100">

  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

</svg>


</body>

</html>

SVG Rectangle

HTML SVG Graphics | HTML for Junior Classes - Class 3

Example

<svg width="400" height="100">

  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />

</svg>

SVG Rounded Rectangle

HTML SVG Graphics | HTML for Junior Classes - Class 3

Example

<svg width="400" height="180">

  <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>

SVG Star

HTML SVG Graphics | HTML for Junior Classes - Class 3

Example

<svg width="300" height="200">

  <polygon points="100,10 40,198 190,78 10,78 160,198"

  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

</svg>

SVG Logo

HTML SVG Graphics | HTML for Junior Classes - Class 3

Example

<svg height="130" width="500">

  <defs>

    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />

      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />

    </linearGradient>

  </defs>

  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />

  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>

  Sorry, your browser does not support inline SVG.

</svg>

Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.

Comparison of Canvas and SVG

The table below shows some important differences between Canvas and SVG:
HTML SVG Graphics | HTML for Junior Classes - Class 3

The document HTML SVG Graphics | HTML for Junior Classes - Class 3 is a part of the Class 3 Course HTML for Junior Classes.
All you need of Class 3 at this link: Class 3
14 videos|31 docs|24 tests
Join Course for Free

Top Courses for Class 3

Related Exams
About this Document
Dec 21, 2024 Last updated
Document Description: HTML SVG Graphics for Class 3 2024 is part of HTML for Junior Classes preparation. The notes and questions for HTML SVG Graphics have been prepared according to the Class 3 exam syllabus. Information about HTML SVG Graphics covers topics like and HTML SVG Graphics Example, for Class 3 2024 Exam. Find important definitions, questions, notes, meanings, examples, exercises and tests below for HTML SVG Graphics.
Introduction of HTML SVG Graphics in English is available as part of our HTML for Junior Classes for Class 3 & HTML SVG Graphics in Hindi for HTML for Junior Classes course. Download more important topics related with notes, lectures and mock test series for Class 3 Exam by signing up for free. Class 3: HTML SVG Graphics | HTML for Junior Classes - Class 3
Description
Full syllabus notes, lecture & questions for HTML SVG Graphics | HTML for Junior Classes - Class 3 - Class 3 | Plus excerises question with solution to help you revise complete syllabus for HTML for Junior Classes | Best notes, free PDF download
Information about HTML SVG Graphics
In this doc you can find the meaning of HTML SVG Graphics defined & explained in the simplest way possible. Besides explaining types of HTML SVG Graphics theory, EduRev gives you an ample number of questions to practice HTML SVG Graphics tests, examples and also practice Class 3 tests
14 videos|31 docs|24 tests
Join Course for Free
Download as PDF
Explore Courses for Class 3 exam

Top Courses for Class 3

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

Summary

,

Sample Paper

,

mock tests for examination

,

Viva Questions

,

Exam

,

ppt

,

Semester Notes

,

Extra Questions

,

shortcuts and tricks

,

HTML SVG Graphics | HTML for Junior Classes - Class 3

,

Objective type Questions

,

HTML SVG Graphics | HTML for Junior Classes - Class 3

,

Free

,

video lectures

,

study material

,

MCQs

,

practice quizzes

,

past year papers

,

HTML SVG Graphics | HTML for Junior Classes - Class 3

,

pdf

,

Important questions

,

Previous Year Questions with Solutions

;
Additional Information about HTML SVG Graphics for Class 3 Preparation

HTML SVG Graphics Free PDF Download

The HTML SVG Graphics is an invaluable resource that delves deep into the core of the Class 3 exam. These study notes are curated by experts and cover all the essential topics and concepts, making your preparation more efficient and effective. With the help of these notes, you can grasp complex subjects quickly, revise important points easily, and reinforce your understanding of key concepts. The study notes are presented in a concise and easy-to-understand manner, allowing you to optimize your learning process. Whether you're looking for best-recommended books, sample papers, study material, or toppers' notes, this PDF has got you covered. Download the HTML SVG Graphics now and kickstart your journey towards success in the Class 3 exam.

Importance of HTML SVG Graphics

The importance of HTML SVG Graphics cannot be overstated, especially for Class 3 aspirants. This document holds the key to success in the Class 3 exam. It offers a detailed understanding of the concept, providing invaluable insights into the topic. By knowing the concepts well in advance, students can plan their preparation effectively. Utilize this indispensable guide for a well-rounded preparation and achieve your desired results.

HTML SVG Graphics Notes

HTML SVG Graphics Notes offer in-depth insights into the specific topic to help you master it with ease. This comprehensive document covers all aspects related to HTML SVG Graphics. It includes detailed information about the exam syllabus, recommended books, and study materials for a well-rounded preparation. Practice papers and question papers enable you to assess your progress effectively. Additionally, the paper analysis provides valuable tips for tackling the exam strategically. Access to Toppers' notes gives you an edge in understanding complex concepts. Whether you're a beginner or aiming for advanced proficiency, HTML SVG Graphics Notes on EduRev are your ultimate resource for success.

HTML SVG Graphics Class 3 Questions

The "HTML SVG Graphics Class 3 Questions" guide is a valuable resource for all aspiring students preparing for the Class 3 exam. It focuses on providing a wide range of practice questions to help students gauge their understanding of the exam topics. These questions cover the entire syllabus, ensuring comprehensive preparation. The guide includes previous years' question papers for students to familiarize themselves with the exam's format and difficulty level. Additionally, it offers subject-specific question banks, allowing students to focus on weak areas and improve their performance.

Study HTML SVG Graphics on the App

Students of Class 3 can study HTML SVG Graphics alongwith tests & analysis from the EduRev app, which will help them while preparing for their exam. Apart from the HTML SVG Graphics, students can also utilize the EduRev App for other study materials such as previous year question papers, syllabus, important questions, etc. The EduRev App will make your learning easier as you can access it from anywhere you want. The content of HTML SVG Graphics is prepared as per the latest Class 3 syllabus.
© EduRev
Education Revolution
Signup to see your scores go up within 7 days!
Access 1000+ FREE Docs, Videos and Tests
Takes less than 10 seconds to signup