Vizualizare sursă pentru „The SVG vector graphics format”

{{#seo:|title=The SVG vector graphics format — Însemn|description=An introduction to SVG: scalable vector graphics, their uses, benefits, software and code examples.|keywords=Însemn, INSEMN, local identity, emblem competition, cultural heritage, artwork and graphic resources|locale=en_GB|site_name=Însemn}}
{{Însemn navigare|lang=en|ro=Formatul grafic vectorial Scalable Vector Graphic - svg}}
<div lang="en">
{{Însemn orientare/en|summary=An introduction to SVG: scalable vector graphics, their uses, benefits, software and code examples.|type=Guide / project resource|related=[[Converting graphic formats]] · [[Electronic artwork submission requirements]]}}

__TOC__

'''SVG (Scalable Vector Graphics)''' is an open standard for 2D vector images developed and maintained by the '''World Wide Web Consortium (W3C)'''. It uses an '''XML''' markup language to describe graphics, allowing SVG images to '''scale to any size''' without losing quality. Here are some details.

== 1. Definition and structure ==
* '''SVG''' is a vector graphics format: images are built from '''mathematical formulas''' defining points, lines, curves and polygons, unlike raster formats (JPEG, PNG), which use pixels.
* Because SVG is based on XML, a file can be '''read and edited''' as text. Each graphic element is defined by XML tags and attributes. For example, a circle can be represented as follows:
<pre>&lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;</pre>

== 2. Scalability and resolution ==
* As a vector format, SVG allows '''unlimited scaling''': resizing without losing clarity. This makes it ideal for:
** Logos and emblems, which need to work at different sizes.
** Web graphics for different devices, from small smartphone screens to large displays.
** High-quality printing.

== 3. Interactivity and animation ==
* '''SVG''' supports complex '''interactivity''' and '''animation''' through JavaScript or CSS. Graphic elements can be animated — for example, changing colour on hover — or respond to user actions.
* It is often used for '''interactive charts''' or maps whose elements can be manipulated separately.

== 4. Web compatibility and integration ==
* SVG files can be included directly in HTML, making them easy to style and control with CSS.
* ''Example:''
<pre>&lt;svg width="100" height="100"&gt;
  &lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;
&lt;/svg&gt;</pre>
* It is fully compatible with most modern browsers, making it popular for web graphics.

== 5. Advantages and disadvantages ==
=== Advantages ===
* '''Scalability:''' No loss of quality when resized.
* '''Editability:''' Easy to edit and manipulate.
* '''Interactivity and animation:''' Supports interactive elements and complex animations.
* '''Small file size:''' SVG files are generally small compared with raster images at similar resolutions.
=== Disadvantages ===
* '''Limited suitability for complexity:''' Not ideal for complex images such as photographs.
* '''Rendering time:''' Very complex vector drawings may take longer to render in a browser.

== 6. Common uses ==
* '''Logo and emblem design:''' Scalability makes SVG excellent for logos used at different sizes.
* '''Web graphics and UI/UX:''' Widely used for icons, interface elements and responsive web graphics.
* '''Interactive maps and diagrams:''' Enables customisable, controllable interactive diagrams and maps.
* '''Web animation:''' Animated SVGs provide attractive visual effects on websites.

== 7. Creating and editing SVG files ==
* '''Popular software''' for creating and editing SVG includes:
** '''Adobe Illustrator''' and '''CorelDRAW''' (commercial).
** '''Inkscape''' (''free and open source'').
** '''Boxy SVG''' and '''SVG-Edit''' (web applications).
* SVG files can also be generated by CAD programs or converted from raster formats using specialist software.

== 8. SVG code examples ==
* A simple SVG file drawing a square and a circle might look like this:
<pre>&lt;svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;rect x="10" y="10" width="30" height="30" fill="blue" /&gt;
  &lt;circle cx="70" cy="70" r="20" fill="green" /&gt;
&lt;/svg&gt;</pre>

'''In brief:''' SVG is an extremely versatile format, ideal for scalable, interactive, high-quality graphics and widely used on the web. It is a preferred choice for technical drawings, logos and adaptable graphics, with uses ranging from graphic design to web development and educational applications.
</div>
{{Însemn subsol/en}}
[[Categorie:English pages]]
[[Categorie:Artwork and graphic resources]]