svgocean.com

Headline:

Priority: Regular High

Text:

<header role="banner">
<h1 style="text-align: justify; margin-top: 20pt; margin-bottom: 6pt;"><span style="font-size: 20pt; font-family: Arial; font-weight: 400;">What is SVG-graphics and how to work with it</span></h1>
<h1 dir="ltr">&nbsp;</h1>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">We often see formats such as JPG, PNG and GIF, which are used both on websites and in social networks. They are obtained by creating bitmap graphics - these are photos, screenshots, and various animated files. Along with these formats, there are many more similar ones, one of which is SVG.</span></p>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;">&nbsp;</p>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">It is also used to display graphics, but not raster, and vector.</span></p>
<h1 dir="ltr">&nbsp;</h1>
<h2 style="text-align: justify; margin-top: 18pt; margin-bottom: 6pt;"><span style="font-size: 16pt; font-family: Arial; font-weight: 400;">What is SVG</span></h2>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">SVG (Scalable Vector Graphics) is a type of graphics, which is formed using geometric objects: lines, circles, rectangles, curves and other elements.</span></p>
<h1 dir="ltr">&nbsp;</h1>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">The aggregate of such details can give out almost any image. For example, it can be an icon of the social network Instagram:</span></p>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;">&nbsp;</p>
<h1 dir="ltr">&nbsp;</h1>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">The impetus for the development of this language markup was first given by the World Wide Web Consortium, which in 1999 was better known as the W3C. W3C also gave the concept of SVG - a language markup for creating two-dimensional graphical interfaces and images.</span></p>
<h1 dir="ltr">&nbsp;</h1>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">Today, SVG is used on all modern sites - it can be as icons for social networks, and full-size illustrations. But more often it is logos and various icons.</span></p>
<h1 dir="ltr">&nbsp;</h1>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">Let's look at why is popular&nbsp; </span><a style="text-decoration: none;" href="https://svgocean.com/"><span style="font-size: 11pt; font-family: Arial; color: #1155cc; text-decoration: underline; text-decoration-skip-ink: none;">svg download</span></a><span style="font-size: 11pt; font-family: Arial;">.</span></p>
<h1 dir="ltr">&nbsp;</h1>
<h2 style="text-align: justify; margin-top: 18pt; margin-bottom: 6pt;"><span style="font-size: 16pt; font-family: Arial; font-weight: 400;">Advantages of SVG</span></h2>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">One of the key features of the SVG format is its scalability. While enlarging pictures in JPG and PNG can cause a drop in quality, with the SVG format, everything will remain the same. You can enlarge a vector image 100 times, it will still look the same. Therefore, SVG-images are well displayed at the highest resolutions, without loss of quality, and are ideal for adaptive websites.</span></p>
<h1 dir="ltr">&nbsp;</h1>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">Another feature of SVG is its customization. Suppose we need to upload a red icon to the site, but there is only a black one at hand. If it's a JPG or PNG bitmap image, you'll have to make a lot of effort to change the color of the icon. In the case of SVG, just open a graphics editor that supports vector images, such as Figma, and change the icon color in one click. Just as if you were changing the color of a simple element.&nbsp;</span></p>
<h1 dir="ltr">&nbsp;</h1>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">Also </span><a style="text-decoration: none;" href="https://svgocean.com/collections/3d-layered-svg"><span style="font-size: 11pt; font-family: Arial; color: #1155cc; text-decoration: underline; text-decoration-skip-ink: none;">SVG 3d image</span></a><span style="font-size: 11pt; font-family: Arial;"> can be opened in HTML and CSS, which means that we can directly through the code change the object itself and its color.</span></p>
<h1 dir="ltr">&nbsp;</h1>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">All these advantages are secured by the weight of the file - it will be an order of magnitude less than any raster image for equal image characteristics. In addition to this vector image can easily animate with JavaScript, which is difficult to do with a normal picture.</span></p>
<h1 dir="ltr">&nbsp;</h1>
<h2 style="text-align: justify; margin-top: 18pt; margin-bottom: 6pt;"><span style="font-size: 16pt; font-family: Arial; font-weight: 400;">Disadvantages of SVG</span></h2>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">As such, the disadvantages of SVG has no, but there are some points to be aware of:</span></p>
<h1 dir="ltr">&nbsp;</h1>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">SVG can't be used for photos. In theory you can get a picture in SVG format, but the file will be very big. In addition, the file will remain the same raster image, which will be covered by an SVG shell.</span></p>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">It is not supported by older browsers.</span></p>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">In general, the SVG format is the best option for using icons, animated elements and illustrations on the site.</span></p>
<h1 dir="ltr">&nbsp;</h1>
<h2 style="text-align: justify; margin-top: 18pt; margin-bottom: 6pt;"><span style="font-size: 16pt; font-family: Arial; font-weight: 400;">Basic SVG Forms</span></h2>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">Each SVG file can consist of elements such as:</span></p>
<h1 dir="ltr">&nbsp;</h1>
<ul style="margin-top: 0px; margin-bottom: 0px; padding-inline-start: 48px;">
<li style="font-size: 11pt; font-family: Arial;">
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt;">a simple line;</span></p>
</li>
<li style="font-size: 11pt; font-family: Arial;">
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt;">broken line;</span></p>
</li>
<li style="font-size: 11pt; font-family: Arial;">
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt;">rectangle;</span></p>
</li>
<li style="font-size: 11pt; font-family: Arial;">
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt;">circle;</span></p>
</li>
<li style="font-size: 11pt; font-family: Arial;">
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt;">ellipse;</span></p>
</li>
<li style="font-size: 11pt; font-family: Arial;">
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt;">polygon.</span></p>
</li>
</ul>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">All of these shapes can be used singly or in combination to create any full-length image: a person, a city, a landscape. You can see what different vector images can look like here.&nbsp;</span></p>
<h1 dir="ltr">&nbsp;</h1>
<h2 style="text-align: justify; margin-top: 18pt; margin-bottom: 6pt;"><span style="font-size: 16pt; font-family: Arial; font-weight: 400;">Where to work with SVG graphics</span></h2>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">As I mentioned above, as a program for editing vector images can be used Figma. In it, you can not only modify an existing SVG file, but also create your own from scratch. To do this, there are tools such as pen, square, line, arrow, ellipse, triangle and star.</span></p>
<h1 dir="ltr">&nbsp;</h1>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">You can also use plugins that create different elements. For example, you can use Shaper to add unusual shapes in one click:</span></p>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;">&nbsp;</p>
<h1 dir="ltr">&nbsp;</h1>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">Any of these shapes can easily be exported in SVG format:</span></p>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;">&nbsp;</p>
<h2 style="text-align: justify; margin-top: 18pt; margin-bottom: 6pt;"><span style="font-size: 16pt; font-family: Arial; font-weight: 400;">How to Export an Element to SVG Figma</span></h2>
<h1 dir="ltr">&nbsp;</h1>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">This is just one way to create an SVG element. In general, Figma is not designed for professional vector image editing, it is usually used for creating layouts and website interfaces that have SVG.</span></p>
<h1 dir="ltr">&nbsp;</h1>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">Speaking of professional software, these are:</span></p>
<h1 dir="ltr">&nbsp;</h1>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><strong><span style="font-size: 11pt; font-family: Arial;">CorelDraw </span></strong><span style="font-size: 11pt; font-family: Arial;">- the most popular graphics editor among amateurs, novice professionals and advanced artists.</span></p>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><strong><span style="font-size: 11pt; font-family: Arial;">Adobe Illustrator</span></strong><span style="font-size: 11pt; font-family: Arial;"> is the global standard for the printing industry. The graphics programs in Illustrator give you the ability to transfer high-quality images from the computer to paper or any other medium. The level of scaling up to 64000% is provided.</span></p>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><strong><span style="font-size: 11pt; font-family: Arial;">Gravit Designer</span></strong><span style="font-size: 11pt; font-family: Arial;"> is a full-featured vector editor. It is suitable for any tasks - from interface and icon design to work with presentations, illustrations and animation.</span></p>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">Also you can find a lot of free services for the fast editing of SVG files.</span></p>
<h1 dir="ltr">&nbsp;</h1>
<h2 style="text-align: justify; margin-top: 18pt; margin-bottom: 6pt;"><span style="font-size: 16pt; font-family: Arial; font-weight: 400;">Browser Support</span></h2>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">The SVG format is supported by all modern browsers, except Internet Explorer 8. But even that can be fixed by using Raphael.js JavaScript library. You can convert your SVG file to this library format at the ReadySetRaphael website.</span></p>
<h1 dir="ltr">&nbsp;</h1>
<h2 style="text-align: justify; margin-top: 18pt; margin-bottom: 6pt;"><span style="font-size: 16pt; font-family: Arial; font-weight: 400;">Conclusion</span></h2>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">Today we have talked about what SVG graphics are and where you can work with them. The key features of SVG are low weight and scalability, which doesn't change the quality of the image in any way.</span></p>
<h1 dir="ltr">&nbsp;</h1>
<p style="text-align: justify; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 11pt; font-family: Arial;">Use SVG graphics on websites to minimize the speed of page loading, as well as improve the perception of content by users. SVG elements are easily adaptable, can change color on mouseover, and are well suited for different animations.</span></p>
<h1 dir="ltr"><br /><br /><br /><br /><br /></h1>
</header>

Edit a post

Headline:

Priority: Regular High

Text:

Comments:

Attribution:

Show to:

Context : Education1

Base roles

When: