| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
Key Features of SVG:
- Scalability: SVG images can be scaled to any size without losing quality.
- Text-Based Format: Since SVGs are written in XML, they can be searched, indexed, and compressed.
- Interactivity: SVGs can be interactive and dynamic, with support for event handling and animation.
- Styling: SVG elements can be styled with CSS, and they can contain inline styles or reference external stylesheets.
- Accessibility: SVGs are accessible to screen readers, and elements within an SVG can have titles, descriptions, and other accessible attributes.
Basic Structure of an SVG:
An SVG is composed of several elements that describe the shape and appearance of the graphic. Here’s a basic example:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" stroke="black" stroke-width="3" fill="red" />
</svg>
<svg>: The root element that defines the SVG canvas. Thewidthandheightattributes specify the size of the canvas.<circle>: An element that defines a circle. The attributes are:cx: The x-coordinate of the center of the circle.cy: The y-coordinate of the center of the circle.r: The radius of the circle.stroke: The color of the circle’s border.stroke-width: The width of the circle’s border.fill: The fill color of the circle.
Common SVG Elements:
<rect>: Defines a rectangle.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect width="150" height="100" x="25" y="50" fill="blue" stroke="black" stroke-width="2" />
</svg>
This creates a blue rectangle with a black border.
2. ‘<line>‘: Defines a line.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="10" x2="190" y2="190" stroke="green" stroke-width="4" />
</svg>
This draws a diagonal green line across the SVG canvas.
3. ‘<ellipse>‘: Defines an ellipse (oval).
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="100" rx="80" ry="50" fill="yellow" stroke="black" stroke-width="3" />
</svg>
This creates a yellow ellipse with a black border.
4 ‘<polygon>‘: Defines a shape made of straight lines.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,150 100,50 150,150" fill="purple" stroke="black" stroke-width="3" />
</svg>
This creates a triangle.
5. ‘<text>‘: Defines text within the SVG.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="40" font-family="Verdana" font-size="35" fill="blue">Hello SVG</text>
</svg>
This renders the text “Hello SVG” in blue.
Animations in SVG:
SVG supports animations using the ‘<animate>‘ element, which can be used to animate attributes of SVG elements.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="red">
<animate attributeName="r" from="10" to="50" dur="2s" repeatCount="indefinite" />
</circle>
</svg>
In this example, the radius of the circle (‘r‘) animates from 10 to 50 over 2 seconds, repeating indefinitely.
CSS and SVG:
You can style SVG elements with CSS, either inline, in a ‘<style>‘ tag within the SVG, or in an external stylesheet.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<style>
.my-circle {
fill: orange;
stroke: black;
stroke-width: 4;
}
</style>
<circle cx="100" cy="100" r="80" class="my-circle" />
</svg>
Embedding SVG in HTML:
There are several ways to embed SVGs in an HTML document:
1.Inline SVG: Directly include the SVG code within your HTML.
<svg width="200" height="200">
<!-- SVG content here -->
</svg>
2. 'img'Tag: Reference an external SVG file.
<img decoding="async" src="image.svg" alt="Description of SVG" />
3. 'object' Tag: Embed an external SVG with the ability to interact with the SVG elements.
<object data="image.svg" type="image/svg+xml"></object>
4. Background Image: Use an SVG as a CSS background image.
.my-div {
background-image: url('image.svg');
}
Advanced SVG:
- Gradients: You can create gradients using ‘
<linearGradient>‘ or ‘<radialGradient>‘. - Clipping and Masking: SVG supports clipping paths and masking for creating complex shapes.
- Filters: Apply graphical effects like blurring, color shifting, and more using SVG filters.
Example of a Complex SVG:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<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="100" rx="85" ry="55" fill="url(#grad1)" />
</svg>
This example creates an ellipse filled with a gradient transitioning from yellow to red.
SVG is a powerful and versatile tool for creating graphics on the web. Its ability to scale without losing quality, combined with its interactivity and accessibility, makes it an essential tool in modern web development. Whether you are creating icons, illustrations, or complex graphical interfaces, SVG provides a rich set of features to help you build responsive and scalable graphics.
