Introduction to the svg element for scalable vector graphics
In HTML5 web development, <svg> tag is used to insert or embed highly graphical Scalable Vector Graphics (SVG) heavy resolution image in design developed web page. SVG image is a highly graphical image resolution format, where SVG image is a complete independent image format compared to other graphic images, which provides web developer direct input and preview features of a high-quality graphical image in the web page website, SVG image is the current complete responsive image format preview.
So, let’s know the <svg> image features and function in HTML5 web page design development.
What is SVG?
SVG stands for Scalable Vector Graphics Highly Graphics Image File Format, which is XML (extensible markup language) based image shape file format, which indicates 2-dimensional graphic image format in design or developed web page. Here, compared to other popular image formats, unlike raster graphics file formats such as JPEG, gif, bmp, PNG image file formats, which are built in an image pixel file format, many types of different shapes, lines, text, 2-dimensional images or shape and text format based graphic objects are designed in SVG graphic format.
<svg> Object Structure in HTML5 Web Development.
<svg> tag in HTML5 web development previews the SVG shape object developed as a graphics container for SVG graphics image design. Where you can create various shapes, lines, text, 2-d shapes, and graphical image objects as per the need in the SVG image object container.
SVG object basic syntax in HTML5.
<svg width=”250″ height=”250″ xmlns=”http://www.w3.org/2000/svg”>
<!– Write detail description about svg image graphics –>
</svg>
SVG Shape object properties.
- SVG object width – Indicates the width of the current SVG shape viewport.
- SVG object height – Indicates the height of the current SVG image shape object viewport.
- SVG xmlns rendring – Indicates the XML rendering location for the design SVG object in the current web page, which is important for SVG shape object rendering.
Create Shapes with HTML5 SVG.
Create svg rectangular shape.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”100″ height=”100″>
<rect p=”30″ q=”30″ width=”100″ height=”100″ fill=”teal”/>
</svg>
<svg width=”70″ height=”70″>
<rect p=”30″ q=”30″ width=”100″ height=”100″ fill=”red”/>
</svg>
</body>
</html>
Create a circle shape in SVG.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”200″ height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<circle cx=”50″ cy=”50″ r=”40″ fill=”lime”/>
</svg>
<svg width=”200″ height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<circle cx=”100″ cy=”100″ r=”80″ fill=”orange”/>
</svg>
</body>
</html>
Create an ellipse shape in SVG.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”100″ height=”100″ xmlns=”http://www.w3.org/2000/svg”>
<ellipse cx=”70″ cy=”70″ rx=”30″ ry=”10″ fill=”orange”/>
</svg>
<svg width=”200″ height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<ellipse cx=”100″ cy=”100″ rx=”30″ ry=”10″ fill=”red”/>
</svg>
</body>
</html>
Create lines shape in SVG.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”200″ height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<line x1=”20″ y1=”20″ x2=”100″ y2=”100″ stroke=”blue” stroke-width=”4″/>
</svg>
</body>
</html>
Create a polygon shape in SVG.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”200″ height=”200″ xmlns=”http://www.w3.org/2000/svg”>
<polygon points=”40,20 80,90 14,87″ fill=”orange”/>
</svg>
</body>
</html>
Styling SVG shape object graphics.
SVG object inline CSS script – Web developers can use svg tag code as internal CSS to define SVG objects or shapes by styling the script code inside the existing web page.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”100″ height=”100″>
<circle cx=”50″ cy=”50″ r=”40″ style=”fill:orange;stroke:black;stroke-width:4″/>
</svg>
</body>
</html>
SVG object external script – In the existing web page, web developers can style and decorate ordinary svg shape objects by creating external CSS code as per the requirement in other visual code editors and linking the external CSS to the existing web page with stylesheet tags and previewing them.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<style>
.createCircle {
fill: yellow;
stroke: red;
stroke-width: 4;
}
</style>
<svg width=”100″ height=”100″ >
<circle cx=”50″ cy=”50″ r=”40″ class=”createCircle”/>
</svg>
</body>
</html>
Adding text to SVG in HTML5.
SVG basic text display.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”400″ height=”100″>
<text x=”10″ y=”70″ font-family=”times-new-roman” font-size=”40″ fill=”red”>Welcome to Vcanhelpsu</text>
</svg>
</body>
</html>
SVG text styling display.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”400″ height=”200″>
<text x=”10″ y=”40″ font-family=”arial” font-size=”40″ fill=”teal” text-anchor=”left” transform=”rotate(20, 30, 30)”>Vcanhelpsu</text>
</svg>
</body>
</html>
Drawing SVG Complex Shapes in HTML5.
SVG Shape Path Element – While designing complex svg images, use the image shape <path> element command and parameter series to create the desired complex svg shape.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”200″ height=”200″>
<path d=”M20 90 Q 100 20 200 90 T 370 90″ stroke=”teal” stroke-width=”4″ fill=”red”/>
</svg>
</body>
</html>
Creating Animation with SVG in HTML5.
If you want to create animated SVG image shapes in your web page, you can create animated svg shapes and objects using <animate>, <animateTransform>, and <animateMotion> tags to create animated svg objects.
Simple SVG animation example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”400″ height=”400″>
<circle cx=”70″ cy=”70″ r=”40″ fill=”brown”>
<animate attributeName=”cx” from=”10″ to=”300″ dur=”4s” repeatCount=”indefinite”/>
</circle>
</svg>
</body>
</html>
Rotate the SVG shape animation.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”200″ height=”200″>
<rect p=”10″ q=”10″ width=”80″ height=”80″ fill=”orange”>
<animateTransform attributeName=”transform” attributeType=”XML” type=”rotate” from=”0 90 90″ to=”380 70 80″ dur=”4s” repeatCount=”indefinite”/>
</rect>
</svg>
</body>
</html>
SVG object accessibility considerations.
Use <title> and <desc> elements within <svg> to make svg user accessible in the current web page.
SVG accessibility considerations example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”300″ height=”300″>
<title>Teal Circle</title>
<desc>You See Teal Circle With 70 Radious</desc>
<circle cx=”100″ cy=”100″ r=”70″ fill=”teal”/>
</svg>
</body>
</html>
Responsive SVG object in HTML5.
To create responsive svg image shape or object you need to make design svg image code compatible with all modern devices preview or display. Preview height and width attributes of design svg object at default 100% zoom level.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=” UTF-8″>
<title> </title>
<body>
<svg width=”100%” height=”100%”>
<circle cx=”50%” cy=”50%” r=”30%” fill=”red”/>
</svg>
</body>
</html>
svg object explanation.
- svg basic structure – svg is a shape object preview container for <svg> object creation to create drawings and shapes in a web page.
- drawing svg shapes – You can use svg shape elements like <rect> shape, <circle> shape, <ellipse> shape, <line> shape, and <polygon> shape to create different svg shapes in an existing web page.
- svg object styling – Developers can use internal and external CSS styling scripts or code to design svg objects or shapes.
- svg object text and path – Use svg elements like <text> and <path> to draw complex svg shapes and text in the desired web page.
- svg object animation – Apply animation using <animate>, <animateTransform>, and <animateMotion> elements to animate svg shapes or objects in the existing web page.
- svg object accessibility – Display svg object descriptive text information using <title> and <desc> in the designed svg object.
- svg object responsiveness – Use svg responsive attributes to make the designed svg object or shape adaptive or responsive to all modern devices and gadgets.
