Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Drawings using the SVG format

Par Rémi BARLAGUET Publié le 25/10/2019 à 15:42:22 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Presentation

The SVG (Scalable Vector Graphics) is a language based on XML. It permits to create vectorial drawings. The language an enormous advantage, which is keeping the image quality when it is resized.

How does it work?

At first, you need to add the SVG tags to enclose all the elements you want to create: <xml>insert code here</xml>. SVG elements can be included into HTML elements, but it is not an obligation. This means that an SVG image can be exported to be used anywhere, but it can be easily integrated into web pages (HTML) to have easily scalable and responsive images.

Inside of the opening SVG tag, it is important to define the size of our drawing zone with the height and width elements. For a drawing zone of 500px of height and 250px of width: <xml height="500" width=250">insert code here</xml>.

Shapes and elements

Next, we will need to define a shape of the element and where we want to add it to our drawing:

- A circle: <circle/>. cx and cy defines the starting points at the center of the circle, r defines the dimension of the circle.

- A rectangle: <rect/>. x and y defines the starting points of the circle, width and height its dimensions.

- An polyline: <polyline/>. points define following positions, x and y defines the broken line.

- A line: <line/>. x1 and y1 defines the starting point of the line, x2 and y2 the ending point of this line. width and height defines the dimensions.

- A path: <path/>. M x y : moves to the wanted point. L x y : draws a ligne at the current position to the specified coordinates. H x : draws horizontally from x. V y : draws vertically from y.

- A text: <text/>. x and y defines the starting points of the circle, width and height its dimensions. Fill fills the rectangle with the color. transform="rotate()" helps making a rotation and takes 3 parameters: how much it needs to tilt and an y and x value. <tspan> permits to write on multiple lines.

If one of you drawings is cut, it is probably because the drawing zone size is smaller than the size of your drawing, which can look like this:

For you to fix this problem, you have to simply modify the values of the height and width either of the element or the drawing zone.

Styles

As seen in the text element before, you can apply certain styles to you shapes and elements, permitting you to personalize them.

- Fill: Fills the shape or the element with the chosen color. You can use the name of the color, or if you want to be more precise, use the rgb() or rgba() tool to apply a precise color.

- stroke: Applies color to the border of the shape or element.

- stroke-width: Permits to specify the width of the border.

- stroke-dasharray: Same as above but using dotted lines instead of a full line border.

- font-family="nameOfFontFamily": Changes the font family of the element.

- font-size: Changes the font size of the element.

- transform="rotate(degrees, x, y): Rotates the element around an x and y position.

Exemples:

This part will help you to understand what you can do with the SVG language and its results. For presentation purpose, we are gonna create those SVG elements onto a webpage.

Rectangle:

			<!DOCTYPE html>
			<html>
			<body>
			
			<svg width="532" height="232">
				<rect x="66" y="66" width="466" height="166" style="fill:red"/>
			</svg>
			
			</body>
			</html>
		

Line:

			<!DOCTYPE html>
			<html>
			<body>
			
			<svg width="210" height="210">
				<line x1="10" y1="10" x2="200" y2="200" style="stroke:rgb(100,220,2); stroke-width:25" />
			</svg>
			
			</body>
			</html>
		

Circle:

			<!DOCTYPE html>
			<html>
			<body>
			
			<svg width="200" height="300">
				<circle cx="80" cy="50" r="40" stroke="rgb(145,255,0)" stroke-width="23" fill="blue" transform="rotate(40,-10,40)" stroke-dasharray="4" />
			</svg>
			
			</body>
			</html>
		

Broken line:

			<!DOCTYPE html>
			<html>
			<body>
			
			<svg width="180" height="350">
				<polyline points="50,50 150,39 74, 18 39, 70 312, 98 9,123" style="fill:orange; stroke:green; stroke-width:6; stroke-dasharray:5;" />
			</svg>
			
			</body>
			</html>
		

Polygon:

			<!DOCTYPE html>
			<html>
			<body>
			
			<svg width="320" height="950">
				<polygon points="474 318,210 181,880 160,501 48" fill="yellow" stroke="black" stroke-dasharray="6"></polygon>
			</svg>
			
			</body>
			</html>
		

Text:

			<!DOCTYPE html>
			<html>
			<body>
			
			<svg width="300" height="300">
				<text x="0" y="15" stroke="blue" stroke-dasharray="42" fill="red" transfort="rotate(30,-4,100)" font-family="TimesNewRoman" font-size="42">SUPINFO KWS</text>
			</svg>
			
			</body>
			</html>
		

Ellipse:

			<!DOCTYPE html>
			<html>
			<body>
			
			<svg width="140" height="500">
				<ellipse cx="200" cy="80" rx="100" ry="50" style="fill:black; stroke:yellow; stroke-width:20; stroke-dasharray:4;" />
			</svg>
			
			</body>
			</html>
		

A bike with path:

The path is quite complicated compared to the others. Compared to the other normal shapes presented before, the path permits to create almost everything.

			<!DOCTYPE html>
			<html>
			<body>
			
			<svg width="50" height="80">
				<path d="M343.746,154.841c-12.696,0-24.804,2.558-35.842,7.18l-26.394-51.211h36.89c4.002,0,7.258,3.256,7.258,7.258
				s-3.256,7.258-7.258,7.258h-7.871c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5,7.5,7.5h7.871c12.273,0,22.258-9.985,22.258-22.258
				s-9.984-22.258-22.258-22.258h-49.192c-2.615,0-5.042,1.363-6.404,3.596c-1.361,2.233-1.461,5.015-0.263,7.34l13.125,25.467H167.423
				l-10.92-21.403h17.269c4.143,0,7.5-3.358,7.5-7.5s-3.357-7.5-7.5-7.5h-49.193c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5,7.5,7.5h15.084
				l14.576,28.568l-17.132,26.543c-13.113-7.065-28.101-11.08-44.011-11.08C41.763,154.841,0,196.603,0,247.936
				c0,51.333,41.763,93.096,93.096,93.096c48.808,0,88.961-37.757,92.793-85.596h22.007l-8.549,27.818h-4.922
				c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5,7.5,7.5h27c4.143,0,7.5-3.358,7.5-7.5s-3.357-7.5-7.5-7.5h-6.386l9.869-32.114l62.406-96.327
				l7.269,14.103c-26.357,16.458-43.933,45.723-43.933,79.02c0,51.333,41.763,93.096,93.097,93.096
				c51.333,0,93.096-41.763,93.096-93.096C436.842,196.603,395.079,154.841,343.746,154.841z M162.121,154.826l43.678,85.61h-19.911
				c-2.162-26.985-15.882-50.758-36.193-66.359L162.121,154.826z M170.824,240.436h-63.96l34.661-53.699
				C157.734,199.592,168.745,218.724,170.824,240.436z M93.096,326.032C50.033,326.032,15,290.999,15,247.936
				c0-43.062,35.033-78.096,78.096-78.096c12.914,0,25.095,3.17,35.837,8.743l-42.139,65.285c-1.489,2.307-1.598,5.244-0.284,7.655
				c1.313,2.411,3.84,3.912,6.586,3.912h77.728C167.036,294.992,133.628,326.032,93.096,326.032z M218.819,232.949l-43.743-85.737
				h99.289L218.819,232.949z M343.746,326.032c-43.063,0-78.097-35.034-78.097-78.096c0-27.498,14.298-51.704,35.838-65.623
				l35.592,69.059c1.332,2.583,3.954,4.065,6.673,4.065c1.157,0,2.331-0.269,3.43-0.835c3.683-1.897,5.129-6.42,3.231-10.103
				l-35.603-69.079c8.956-3.586,18.714-5.581,28.936-5.581c43.063,0,78.096,35.034,78.096,78.096
				C421.842,290.999,386.809,326.032,343.746,326.032z" />
			</svg>
	
			</body>
			</html>
		

A plane with path:

			<!DOCTYPE html>
			<html>
			<body>
			
			<svg width="50" height="80">
				<path d="m85.085938 304.40625c-6.144532 2.882812-8.855469 10.140625-6.117188 16.34375l28.066406 60.25c1.378906 3 3.894532 5.335938 6.988282 6.488281 1.355468.492188 2.792968.746094 4.238281.746094 1.808593.015625 3.59375-.371094 5.238281-1.117187l212.054688-99.046876-19.207032 200.824219c-.371094 3.953125 1.152344 7.839844 4.109375 10.480469 9.296875 7.695312 20.882813 12.078125 32.9375 12.472656
				3.324219-.003906 6.628907-.421875 9.851563-1.242187 17.214844-4.492188 30.5625-19.832031 39.667968-46.03125l83.449219-247.101563 165.273438-77.09375c48.648437-22.699218 73.71875-68.726562 56.882812-104.652344-9.554687-18.777343-27.855469-31.550781-48.773437-34.054687-23.242188-3.507813-46.996094.148437-68.105469 10.484375l-190.726563 89.433594-205.0625-80.207032c-25.824218-9.726562-46.277343-9.476562-60.621093.878907-12.035157 
				9.875-18.882813 24.71875-18.589844 40.285156.125 3.949219 2.113281 7.601563 5.363281 9.859375l138.082032 94.921875-79.078126 37.421875-132.601562-33.683594c-5.433594-1.335937-11.089844 1.113282-13.84375 5.988282l-33.050781 59.496093c-1.714844 3.152344-1.984375 6.894531-.738281 10.261719 1.238281 3.371094 3.871093 6.039062 7.226562 7.328125l98.167969 40.542969zm57.121093-248.09375c.734375-5.273438 3.402344-10.074219 7.488281-13.472656 
				7.113282-5.117188 20.085938-4.367188 37.421876 2.117187l182.617187 71.226563-83.328125 38.917968zm-112.257812 180.117188 21.703125-38.542969 127.605468 31.679687c2.75.695313 5.652344.433594 8.238282-.742187l414.75-193.71875c16.488281-8.132813 35.058594-11.09375 53.261718-8.484375 12.765626 1.175781 24.136719 8.542968 30.4375 19.707031 10.46875 22.457031-10.109374 55.261719-44.914062 71.476563l-143.695312 67.363281	
				8.734374-25.828125c2.207032-6.644532-1.398437-13.824219-8.042968-16.027344-6.652344-2.203125-13.828125 1.402344-16.03125 8.046875l-102.660156 305.476563c-6.113282 17.34375-13.722657 27.699218-22.203126 29.9375-5.253906 1.011718-10.691406-.019532-15.21875-2.863282l24.949219-261.953125c.652344-6.886719-4.398437-13-11.292969-13.652343-6.886718-.660157-13 4.398437-13.65625 11.285156l-3.863281 40.039062-214.054687
				99.789063-17.578125-37.421875 35.167969-16.460938c4.527343-1.996094 7.445312-6.472656 7.445312-11.414062 0-4.945313-2.917969-9.421875-7.445312-11.414063zm0 0" />
			</svg>
	
			</body>
			</html>
		

Conclusion

SVG language is kind of simple to use for basic drawings, but can get pretty messy when making complicated objects. This image format has real advantages, as being lightweight and easily scalable, which means perfect for a responsive website.

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels