What you should already know

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

• HTML
• Basic XML

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.

• SVG stands for Scalable Vector Graphics
• SVG is used to define vector-based graphics for the Web
• SVG defines the graphics in XML format
• Every element and every attribute in SVG files can be animated
• SVG is a W3C recommendation
• SVG integrates with other W3C standards such as the DOM and XSL

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.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 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>

SVG Circle - <circle>

<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. 

</svg>

<svg

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:

<svg height="140" width="360">

<ellipse cx="200" cy="80" rx="100" ry="50"

style="fill:green;stroke:purple;stroke-width:2" />

</svg>

SVG <line>

SVG <polygon>

SVG <polyline>

SVG <path>

SVG <text>

Overlapping elements 1

Overlapping elements

Imágenes SVG

SVG Radial Gradient - <radialGradient>

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