HTML SVG Graphics

Tutorial HTML SVG Graphics

Free Tutorial HTML SVG Graphics

HTML Graphics

This lesson covers SVG's main tag, the <svg> tag. Basic SVG shapes (lines, rectangles, circles, curves, etc.) are discussed in the Basic SVG Shapes lesson. Some more advanced shapes are discussed in the SVG Advanced Shapes lesson. The SVG lesson (2) covers other aspects of SVG images.

What you should already know

Before you continue, you should have some basic understanding of the following:

What is SVG
SVG (Scalable Vector Graphics = Scalable Vector Graphics) is a markup language created by the W3C and aimed at the representation of vector graphics (drawings and text).

SVG recommendations published or in preparation by the W3C are discussed in the Lesson on History of the Web.

In a vector graphic, the elements of the image are defined as elementary shapes (lines, rectangles, circles, curves, polygons, etc.), defined by tags similar to those in HTML. For this reason SVG is not a suitable format for photographs, but it is suitable for any type of drawing, technical or artistic.

The advantages of SVG are many:

1. SVG images can be enlarged to any scale without losing quality, since they are defined as shapes that the browser draws with the necessary precision.
2. SVG images tend to take up little space as they are defined by labels. The size in KB of the image is also independent of the size with which it is seen on the web page.
3. Images can be easily reused and combined as it is enough to copy the source code from one image to another.
4. Images can be dynamically modified using style sheets or javascript because they are part of the web page.
An SVG graphic can be included on a web page in two ways, as an internal object or as an external object.

You can embed SVG elements directly into your HTML pages.

The SVG plane

El plano SVG - SVG drawings are defined in an infinite plane in which the Y-axis is oriented downward, as shown in the following drawing, which shows the coordinate axes, four points in red, and their coordinates.

Y X (100, 100) (100, -100) (-100, -100) (-100, 100)


Example: SVG Circle - <circle> a simple code, change parameters
<svg version="1.1" xmlns="" width="400" height="400" viewBox="-200 -200 400 400" style="background-color: #eeeeee">
<line x1="-200" y1="0" x2="200" y2="0" stroke="black" stroke-width="1" />
<line x1="0" y1="-200" x2="0" y2="200" stroke="black" stroke-width="1" />
<text x="10" y="190" font-family="sans-serif" font-size="20" fill="black">Y</text>
<polyline points="-5,190 0,200 5,190" fill="none" stroke-width="1" stroke="black" />
<text x="180" y="-10" font-family="sans-serif" font-size="20" fill="black">X</text>
<polyline points="190,5 200,0 190,-5" fill="none" stroke-width="1" stroke="black" />
<polygon points="100,100 -100,100 -100,-100, 100,-100" fill="none" stroke-width="1" stroke="black" stroke-dasharray="5,5" />
<circle cx="100" cy="100" r="4" fill="red" />
<text x="105" y="120" font-family="sans-serif" font-size="18" fill="black">(100, 100)</text>
<circle cx="100" cy="-100" r="4" fill="red" />
<text x="105" y="-105" font-family="sans-serif" font-size="18" fill="black">(100, -100)</text>
<circle cx="-100" cy="-100" r="4" fill="red" />
<text x="-105" y="-105" font-family="sans-serif" font-size="18" fill="black" text-anchor="end">(-100, -100)</text>
<circle cx="-100" cy="100" r="4" fill="red" />
<text x="-105" y="120" font-family="sans-serif" font-size="18" fill="black" text-anchor="end">(-100, 100)</text>



SVG Circle - <circle>

Example: SVG Circle - <circle> a simple code, change parameters
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
Sorry, your browser does not support inline SVG.


Example: a simple code, change parameters
width="100" height="100" viewBox="-50 -50 100 100"
style="background-color: lightgray">
<circle cx="0" cy="0" r="50" fill="none" stroke="red" stroke-width="1" />



SVG <ellipse>

An ellipse is closely related to a circle. The difference is that an ellipse has an x and a y radius that differs from each other, while a circle has equal x and y radius:

Here is the SVG code:

Example: SVG <ellipse> a simple code, change parameters
<svg height="140" width="360">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:green;stroke:purple;stroke-width:2" />



SVG <line>



SVG <polygon>



SVG <polyline>



SVG <path>



SVG <text>

Overlapping elements 1

Overlapping elements

Imágenes SVG

SVG Radial Gradient - <radialGradient>



  1. HTML Image tag, code
  2. How to code in HTML
  3. HTML text tag
  4. HTML text, how to display
  5. Container responsive styles
  6. HTML container tag
  7. HTML container
  8. HTML div style property
  9. How to put text in image HTML
  10. How to insert text in html code using javascript dynamically
  11. HTML background Image full screen responsive
  12. HTML List Bullet
  13. HTML List Style Type
  14. HTML List
  15. HTML Color Text
  16. HTML Colors
  17. HTML Image Align
  18. HTML Image Border
  19. HTML Image Background
  20. HTML Image Link
  21. HTML Image Size
  22. HTML Text Style
  23. HTML Text Align
  24. HTML Text Size
  25. HTML Text Color Style
  26. HTML Text Color
  27. HTML Table Color
  28. HTML Table Rowspan and Colspan
  29. HTML Table Width
  30. HTML Table Style
  31. HTML Table Border
  32. HTML Table
  33. HTML Font Face
  34. HTML Font Size
  35. HTML Font Color
  36. HTML headings tag, size, color, padding, align
  37. HTML div border color
  38. HTML div class tag attribute
  39. HTML div class container
  40. HTML form action - radio HTML form - how to create
  41. HTML comment one line and multiple lines
  42. HTML link open in new tab or window - how to create link
  43. How to create HTML link without underline
  44. HTML link tag with example
  45. HTML button action - How to create a HTML button action, size
  46. HTML button onclick - How to create a HTML button style onclick
  47. HTML button link - How to create a button style in HTML
  48. HTML table style, HTML border, width and height
  49. HTML image, size, link and image background
  50. HTML colors, background, text and border color

Tag <title>

In this section you will find general information about the web page, while the actual content of the page can be found in the tag. Before you save the file, remember that it needs the .html extension at the end.

<title> Information on the content of the pages. My first web page!</title>

Tag <body>

The body element is the one that defines the beginning of the content of the actual pages (titles, paragraphs, code scripts, photos, videos, whatever).

As you can see in the next tutorial, we will treat all these content elements in turn.
For now, all you have to remember is that body encapsulates the entire content of the pages.

Example 3:

<!DOCTYPE html>
<title> Information on the content of the pages. My first web page!</title>

<h1> Information on the content of the pages. My first web page!</h1>
<p> Here we have a Paragraph</p>

Note: <p> (paragraph) we treat in the following tutorial

<< Previous Page
HTML Introduction
Next Page >>
HTML Tags Attributes

Online Editor

news templates


news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

news templates
Find here examples of creative and unique website layouts.

Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.