{"id":1514,"date":"2022-02-08T09:41:42","date_gmt":"2022-02-08T09:41:42","guid":{"rendered":"https:\/\/blog.amt.in\/?p=1514"},"modified":"2022-02-08T09:41:42","modified_gmt":"2022-02-08T09:41:42","slug":"introduction-to-vector-graphics","status":"publish","type":"post","link":"https:\/\/blog.amt.in\/index.php\/2022\/02\/08\/introduction-to-vector-graphics\/","title":{"rendered":"Introduction to Vector Graphics"},"content":{"rendered":"<p>Vector graphics\u00c2\u00a0are\u00c2\u00a0computer graphics\u00c2\u00a0images\u00c2\u00a0that are defined in terms of 2D points, which are connected by lines and curves to form polygons and other shapes.\u00c2\u00a0Each of these points has a definite position on the\u00c2\u00a0<i>x-<\/i>\u00c2\u00a0and\u00c2\u00a0<i>y-<\/i>axis of the work plane and determines the direction of the\u00c2\u00a0path; further, each path may have various properties including values for stroke color, shape, curve, thickness, and fill.\u00c2\u00a0Vector graphics are commonly found today in the\u00c2\u00a0SVG,\u00c2\u00a0EPS,\u00c2\u00a0PDF\u00c2\u00a0or\u00c2\u00a0AI\u00c2\u00a0graphic file formats and are intrinsically different from the more common\u00c2\u00a0raster graphics\u00c2\u00a0file formats such as\u00c2\u00a0JPEG,\u00c2\u00a0PNG,\u00c2\u00a0APNG,\u00c2\u00a0GIF, and\u00c2\u00a0MPEG4.<\/p>\n<p>Modern vector graphics displays can sometimes be found at\u00c2\u00a0laser light shows, where two fast-moving X-Y\u00c2\u00a0mirrors\u00c2\u00a0position the beam to rapidly draw shapes and text as straight and curved strokes on a screen.<\/p>\n<p>Vector graphics can be created in a form using a\u00c2\u00a0pen plotter, a special type of printer that uses a series of ballpoint and felt-tip pens on a servo-driven mount that moves horizontally across the paper, with the plotter moving the paper back and forth through its paper path for vertical movement. Although a typical plot might easily require a few thousand paper motions, back and forth, the paper doesn&#8217;t slip. In a tiny roll-fed plotter made by Alps in Japan, teeth on thin sprockets indented the paper near its edges on the first pass and maintained registration on subsequent passes.<\/p>\n<p>Some Hewlett-Packard pen plotters had two-axis pen carriers and stationery paper (plot size was limited). However, the moving-paper H-P plotters had grit wheels (akin to machine-shop grinding wheels) which, on the first pass, indented the paper surface, and collectively maintained registration.<\/p>\n<p>The\u00c2\u00a0World Wide Web Consortium\u00c2\u00a0(W3C) standard for vector graphics is\u00c2\u00a0Scalable Vector Graphics\u00c2\u00a0(SVG). The standard is complex and has been relatively slow to be established at least in part owing to commercial interests. Many web browsers now have some support for rendering SVG data but full implementations of the standard are still comparatively rare.<\/p>\n<p>In recent years, SVG has become a significant format that is completely independent of the resolution of the rendering device, typically a printer or display monitor. SVG files are essentially printable text that describes both straight and curved paths, as well as other attributes. Wikipedia prefers SVG for images such as simple maps, line illustrations, coats of arms, and flags, which generally are not like photographs or other continuous-tone images. Rendering SVG requires conversion to raster format at a resolution appropriate for the current task. SVG is also a format for animated graphics.<\/p>\n<p>There is also a version of SVG for mobile phones. In particular, the specific format for mobile phones is called SVGT (SVG Tiny version). These images can count links and also exploit anti-aliasing. They can also be displayed as wallpaper.<\/p>\n<p>Advantages to this style of\u00c2\u00a0drawing\u00c2\u00a0over\u00c2\u00a0raster graphics:<\/p>\n<ul>\n<li>This minimal amount of information translates to a much smaller\u00c2\u00a0file size\u00c2\u00a0compared to large raster images (the size of representation does not depend on the\u00c2\u00a0dimensions\u00c2\u00a0of the object), though a vector graphic with a small file size is often said to lack detail compared with a real world photo.<\/li>\n<li>Correspondingly, one can infinitely zoom in on e.g., a circle arc, and it remains smooth. On the other hand, a polygon representing a curve will reveal being not really curved.<\/li>\n<li>On zooming in, lines and curves need not get wider proportionally. Often the width is either not increased or less than proportional. On the other hand, irregular curves represented by simple geometric shapes may be made proportionally wider when zooming in, to keep them looking smooth and not like these geometric shapes.<\/li>\n<li>The parameters of objects are stored and can be later modified. This means that\u00c2\u00a0moving,\u00c2\u00a0scaling,\u00c2\u00a0rotating,\u00c2\u00a0filling\u00c2\u00a0etc. doesn&#8217;t degrade the quality of a drawing. Moreover, it is usual to specify the dimensions in device-independent units, which results in the best possible\u00c2\u00a0rasterization\u00c2\u00a0on raster\u00c2\u00a0devices.<\/li>\n<li>From a 3-D perspective, rendering shadows is also much more realistic with vector graphics, as shadows can be abstracted into the rays of light from which they are formed. This allows for photo realistic images and renderings.<\/li>\n<\/ul>\n<p>Vector graphics editors\u00c2\u00a0typically allow translation, rotation, mirroring, stretching, skewing,\u00c2\u00a0affine transformations, changing of\u00c2\u00a0z-order\u00c2\u00a0(loosely, what&#8217;s in front of what) and combination of primitives into more complex objects.<\/p>\n<p>More sophisticated\u00c2\u00a0transformations\u00c2\u00a0include set\u00c2\u00a0operations\u00c2\u00a0on closed\u00c2\u00a0shapes\u00c2\u00a0(union,\u00c2\u00a0difference,\u00c2\u00a0intersection, etc.).<\/p>\n<p>Vector graphics are ideal for simple or composite drawings that need to be device-independent, or do not need to achieve\u00c2\u00a0photo-realism. For example, the\u00c2\u00a0PostScript\u00c2\u00a0and\u00c2\u00a0PDF\u00c2\u00a0page description languages\u00c2\u00a0use a vector graphics model.<\/p>\n<p>The above is a brief about Vector Graphics. Watch this space for more updates on the latest trends in Technology.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vector graphics\u00c2\u00a0are\u00c2\u00a0computer graphics\u00c2\u00a0images\u00c2\u00a0that are defined<\/p>\n","protected":false},"author":1,"featured_media":1516,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[866,7,505],"tags":[867,18,507],"class_list":["post-1514","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-computer-graphics","category-techtrends","category-vector-graphics","tag-computer-graphics","tag-technology","tag-vector-graphics"],"_links":{"self":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/comments?post=1514"}],"version-history":[{"count":1,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1514\/revisions"}],"predecessor-version":[{"id":1515,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/posts\/1514\/revisions\/1515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/media\/1516"}],"wp:attachment":[{"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/media?parent=1514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/categories?post=1514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.amt.in\/index.php\/wp-json\/wp\/v2\/tags?post=1514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}