HTML SVG

Nikhil

Published on 2021-07-02 05:36:30

HTML SVG in this learn about the SVG is Scalable Vector Graphics and also code example, sample design using SVG

SVG stands for Scalable Vector Graphics. SVG is used to define graphics for the Web The HTML <svg> element is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

SVG can be written directly into a HTML document. Inline SVG can be styled and manipulated using CSS and JavaScript.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Atutorialhub SVG </title>
<style>
.attention {
fill: red;
width: 50px;
height: 50px;
}
</style>
</head>

<body>

The above inline SVG can then be styled using the corresponding CSS class:

.attention {
fill: red;
width: 50px;
height: 50px;
}

Embedding external SVG files in HTML

You can use the <img> or <object> elements to embed external SVG elements. Setting the height and width is optional but is highly recommended. Using the image element

Using <img> does not allow you to style the SVG using CSS or manipulate it using JavaScript. Using the object element

Unlike <img>, <object> directly imports the SVG into the document and therefore it can be manipulated using Javascript and CSS.

Embedding SVG using CSS

You can add external SVG files using the background-image property, just as you would do with any other image.

HTML:

CSS:

.attention {
background-image: url(attention.svg);
background-size: 100% 100%;
width: 50px;
height: 50px;
}

You can also embed the image directly into a CSS file using a data URL:

background-image:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink %3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%201000%201000%22%20%3E%0D%0A% 3Cpath%20id%3D%22attention%22%20d%3D%22m571%2C767l0%2C-106q0%2C-8%2C-5%2C-13t-12%2C-5l-108%2C0q-7% 2C0%2C-12%2C5t-5%2C13l0%2C106q0%2C8%2C5%2C13t12%2C6l108%2C0q7%2C0%2C12%2C-6t5%2C-13Zm-1%2C-208l10% 2C-257q0%2C-6%2C-5%2C-10q-7%2C-6%2C-14%2C-6l-122%2C0q-7%2C0%2C-14%2C6q-5%2C4%2C-5%2C12l9%2C255q0%2 C5%2C6%2C9t13%2C3l103%2C0q8%2C0%2C13%2C-3t6%2C-9Zm-7%2C-522l428%2C786q20%2C35%2C-1%2C70q-10%2C17%2 C-26%2C26t-35%2C10l-858%2C0q-18%2C0%2C-35%2C-10t-26%2C-26q-21%2C-35%2C-1%2C-70l429%2C-786q9%2C-17% 2C26%2C-27t36%2C-10t36%2C10t27%2C27Z%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);

Intersting? Share it

ATutorialHub Related Guide

AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2

Admin

2021-10-28 15:14:42

·

AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2 we are going to learn to Deploy MERN Application to aws Amazon EC2 set up a web server on the aws.
Sea battle game only using HTML and CSS

Admin

2021-09-20 03:43:36

·

sea battle game where using only HTML and CSS and animation in css and html tags sea battle game

HTML Tutorials Comments (9)

Your email address will not be published. Required fields are marked*

User Comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website

Sax

2021-09-25 19:35:50

Nice website