Scribd
Upload
3 views

WEEK2

The document outlines the aim to develop basic graphical shapes using HTML5 SVG, highlighting the advantages of SVG over raster images. It provides code examples for creating various shapes, including rectangles, triangles, a face, and a gradient representing the Indian flag. Each example demonstrates the use of SVG elements to create scalable graphics without loss of resolution.

Uploaded by

katrusampathvishal879
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

WEEK2

The document outlines the aim to develop basic graphical shapes using HTML5 SVG, highlighting the advantages of SVG over raster images. It provides code examples for creating various shapes, including rectangles, triangles, a face, and a gradient representing the Indian flag. Each example demonstrates the use of SVG elements to create scalable graphics without loss of resolution.

Uploaded by

katrusampathvishal879
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

WEEK-2

AIM : Develop the Different basic Graphical Shapes using HTM5 SVG

DESCRIPTION:

SVG, i.e., Scalable Vector Graphics, which is an image format, but they are different from
raster images such as .png, .jpg, and .gif, which use a grid of tiny pixels to create an image.
When .png and .jpg images are zoomed in, then the pixels become larger, and the image
becomes blurry. Still, the vector image can be scaled to any size without losing its resolution
because its appearance is based on geometry instead of fixed pixels.

HTML SVG is a modularized language for describing graphics in XML format. It describes
two-dimensional vector and mixed vector/raster graphics. The W3C recommends it.

SVG is mostly used for vector-type diagrams, such as pie charts and 2-dimensional graphs in
an X and Y coordinate system.
Four programs by using the canvas.

1.Not Square(Rectangle inside rectangle)

<html >
<body>
<svg width="500" height="500">
/* where G is the container and multiple elements can be used together */
<g>
<rect height="140" width="300" x="50" y="50" style="fill: white stroke: black stroke-width:1;"/>
<rect height="100" width="260" x="70" y="70" style="fill: black;" />
</g>
</svg>
</body>
</html>

OUTPUT

2.Pringles (Two traingles opposite to each other)


<html>
<body>
<svg width="1000" height="1000">
<line x1="80" y1="100" x2="80" y2="240" stroke="black" stroke-width="2" />
<line x1="80" y1="100" x2="200" y2="160" stroke="black" stroke-width="2" />
<line x1="80" y1="240" x2="200" y2="160" stroke="black" stroke-width="2" /
<line x1="200" y1="160" x2="320" y2="100" stroke="black" stroke-width="2" />
<line x1="320" y1="100" x2="320" y2="240" stroke="black" stroke-width="2" />
<line x1="200" y1="160" x2="320" y2="240" stroke="black" stroke-width="2" />
</svg>
</body>
</html>

OUTPUT

3. Face( )
<html>

<body>
<svg width="500" height="500">
<g>
<circle cx="200" cy="200" r="70" fill="#E8BEAC" stroke="black" stroke-width="2" />
<circle cx="170" cy="175" r="15" fill="white" stroke="black" stroke-width="7" />
<circle cx="230" cy="175" r="15" fill="white" stroke="black" stroke-width="7" />
<circle cx="112" cy="190" r="20" fill="#E8BEAC" stroke="black" stroke-width="2" />
<circle cx="285" cy="190" r="20" fill="#E8BEAC" stroke="black" stroke-width="2" />
<line x1="200" y1="230" x2="200" y2="200" stroke="black" stroke-width="3" />

<path d="M 165 215 a1,0.9 0 0,0 70,0" fill="none" stroke="black" stroke-width="3" />
</g>
</svg>
</body>
</html>
OUTPUT

4.Gradient colours (Indian Flag)


<html>
<body>
<svg width="300" height="300">
<linearGradient id="color" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#FF9933" />
<stop offset="35%" stop-color="#FFFFFF" />
<stop offset="70%" stop-color="#FFFFFF" />
<stop offset="100%" stop-color="#138808" />
</linearGradient>
<rect width="300" height="300" fill="url(#color)" />
<text x="150" y="150" text-anchor="middle" alignment-baseline="middle" font-family="Times New
Roman"
font-size="30" fill="blue">
HELLO WORLD
</text>
</svg>
</body>
</html>

OUTPUT

You might also like