-HTMLS SVG HTMLS5-— SVG 3.1. HTMLS5 - SVG: SVG(Scalable Vector Graphics) is a markup language used to create vector based graphics and animations on the web. It allows for the cteation of scalable and resolution-independent images that can be manipulated and animated using JavaScript or CSS. SVG is supported by all modem web browsers and provides a wide range of features and elements to create visually appealing and interactive graphics SVG is an XML-based file format for describing vector graphics, which are graphics that use mathematical formulas to describe shapes, rather than pixels.This makes SVGs ideal for creating images that can scale infinitely without losing quality regardless of screen size or resolution. They are commonly used for logos, icons, charts, and other graphical elements. Advantages of SVG: The advantages of using SVG over other image and GI formats (like IPE * SVG images scale without losing quality, making them perfect for responsive designs * SVG files are often smaller than bitmap images, reducing load times. * SVG images can be edited easily with text editors, allowing for quick changes * SVG content is accessible to screen readers, enhancing web accessibility * SVG supports CSS and JavaScript animations, allowing for interactive and dynamic graphics. Key features of HTMLS SVG include: SLN| Feature Definition 1 | Basie Shapes Basic Shapes: SVG provides elements such as , , , , , and to cteate basic shapes on the canvas. Ms.Neha,Dept. Of Computer Science,PESIAMS,Shimoga. 1UNIT 3 -HTMLS SVG 2 | Paths SVG allows you to create complex shapes using path commands like clement, which supports various commands like M (move to), L (line to), € (eubie Bezier curve), Q (quadratic Bezier curve), and more. Text SVG supports the element to display text within the graphic, allowing you to control the font, size, alignment, and other text-related properties 4 | Transformations SVG provides transformations like translation, rotation, scaling, and skewing through attributes like transform, allowing you to ‘manipulate and animate elements in the SVG canvas, Gradients SVG supports lincar and radial gradients using the clements, allowing you to create smooth color transitions across shapes and objects. 6 | Filters and Effects SVG offers a variety of filters and effects to apply to shapes and images, such as blurring, drop shadows, color adjustments, and more, using the element. 7 | Animation SVG supports animation and interactivity through CSS animations, JavaScript, and the element. You can animate properties like position, size, color, opacity, and more to create dynamic and engaging visuals. 8 | Integration with HTMLS SVG can be seamlessly integrated with HTMLS elements and other technologies. You can embed SVG directly within an HTML document using the element 3.2. Viewing SVG Files > To view SVG files, you have a few options: 1. | Web Browsers uch as Google fari, and Microsoft Edge, have built-in support for rendering SVG + You can simply open an SVG file in your web browser by selecting "File" > "Open File" or by dragging and dropping the SVG file into the browser window. Ms.Neha,Dept. OF Compu 1 Science,PESIAMS Shimoga. 2UNIT 3 -HTMLS SVG 2. | Online SVG Viewers + There are various online tools and websites that allow you to upload and view SVG files directly in your browser. Some popular options include SVG Viewer by SVG-Edit (https://svgedit.github o/svgeditldistisvg editor.html) and SVG Viewer by Codepen (https://codepen io/S VG Viewer/details/bdVX v0). 3. | SVG Editing Software Some popular options include Adobe Illustrator, Inkscape, Sketch, and CorelDRAW. ‘These tools not only allow you to view SVG files but also provide advanced editing capabilities for modifying and creating SVG graphics SVG files can be opened and viewed using dedicated SVG editing software. 4. | Text Editors Since SVG files are XML-based, you can open them in any text editor, such as Notepad, Sublime Text, Visual Studio Code, or Atom, While this option doesn't provide a visual representation of the SVG, it allows you to inspect and modify the code directly. 3.3. Embedding SVG in HTMLS Embedding SVG (Scalable Vector Graphics) in an HTMLS document can be done in a few different ways, depending on how you want to use the SVG and whether you need to manipulate or style it directly within the HTML, Here are the primary methods: 1, Embedding SVG Directly in HTML with the

My SVG Circle

00"> 100" r="80" fill="skyblue" stroke="black” stroke- width="3" /> -sthtml> My SVG Circle 2. Using the Tag to Embed SVG ‘The tag allows you to link to an external SVG file, similar to embedding raster images (e.g., JPEG or PNG). Features: + Simple embedding: Easy way to include SVG files without inline code. + No interactivity: You can't manipulate the contents of the SVG with CSS or JavaScript using this method. It's treated like an image. + Responsive: Works well for embedding static SVG images, and it scales depending on its. container. 3. Using the