{"id":90,"date":"2023-05-23T15:30:17","date_gmt":"2023-05-23T15:30:17","guid":{"rendered":"http:\/\/svg-presentation.local\/?page_id=90"},"modified":"2023-05-24T15:23:20","modified_gmt":"2023-05-24T15:23:20","slug":"digital-images","status":"publish","type":"page","link":"https:\/\/jeffmcnear.com\/wpsvg\/","title":{"rendered":"DIGITAL IMAGES"},"content":{"rendered":"\n<p>Raster or bitmap images are a display of a rectangular grid of pixels arranged in rows and columns and assigned color values.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote has-small-font-size is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-small-font-size\"><strong>Raster: <\/strong><em>a set of horizontal lines composed of individual pixels, used to form an image on a screen or in matrix printing.<\/em><\/p>\n<cite><a href=\"https:\/\/www.dictionary.com\/browse\/raster\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.dictionary.com\/browse\/raster<\/a><\/cite><\/blockquote>\n\n\n\n<p><strong>Two types of image compression<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lossy &#8211; reduces file size by permanently eliminating certain information (transitions are averaged)<\/li>\n\n\n\n<li>Lossless &#8211; retains raster values during compression (colors can be limited)<\/li>\n<\/ul>\n\n\n\n<p><strong>GIF &#8211; 1987<\/strong> (lossless)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>always reduced to no more than 256 unique colors<\/li>\n\n\n\n<li>can be animated<\/li>\n\n\n\n<li>primitive background transparency &#8211; jagged edges<\/li>\n\n\n\n<li>patented by Unisys in 1995<\/li>\n\n\n\n<li>pretty good for icons &amp; logos <\/li>\n<\/ul>\n\n\n\n<p><strong>JPG &#8211; 1992<\/strong> (lossy)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>the most common file type you run across on the web<\/li>\n\n\n\n<li>for photographs not suited to images with text, large blocks of solid color, and crisp edges<\/li>\n\n\n\n<li>compression averages out variances in spectrum of colors &amp; gradients<\/li>\n\n\n\n<li>best for photographic images<\/li>\n<\/ul>\n\n\n\n<p><strong>PNG &#8211; 1997<\/strong> (lossless)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>can save your image with more colors on a transparent background<\/li>\n\n\n\n<li>more efficient compression than GIF<\/li>\n\n\n\n<li>open source<\/li>\n\n\n\n<li>better for icons &amp; logos than GIF<\/li>\n<\/ul>\n\n\n\n<p><strong>SVG &#8211; 1999<\/strong> <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>wide web support by 2011<\/li>\n\n\n\n<li>purely a vector graphic format &#8211; not raster or bitmap!<\/li>\n<\/ul>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-left\"><strong>WAYS TO GENERATE SVG FILES<\/strong><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>SUBSCRIPTION<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.adobe.com\/products\/illustrator\/free-trial-download.html\" target=\"_blank\">Adobe Illustrator<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.sketch.com\/pricing\/\">Sketch<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>OPEN SOURCE<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/inkscape.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Inkscape<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/vectr.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Vectr<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>WAYS THAT WORDPRESS HANDLES SVG FILES DIFFERENTLY THAN OTHER IMAGE TYPES:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SVG files are not resized upon upload so the image size options (full, large, medium &amp; thumbnail) cannot be applied<\/li>\n\n\n\n<li>For the same reason the size percentage settings are not reliable<\/li>\n\n\n\n<li>The viewBox &amp; Style size attributes set in the .SVG file will be the default size of the image (as presented on the front end)<\/li>\n\n\n\n<li>The width control will modify the size of the image &#8211; but the height control will not<\/li>\n\n\n\n<li>A containing block will limit the size of the .SVG image regardless of other settings by default<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Raster or bitmap images are a display of a rectangular grid of pixels arranged in rows and columns and assigned color values. Raster: a set of horizontal lines composed of individual pixels, used to form an image on a screen or in matrix printing. https:\/\/www.dictionary.com\/browse\/raster Two types of image compression GIF &#8211; 1987 (lossless) JPG [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-90","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/pages\/90","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/comments?post=90"}],"version-history":[{"count":0,"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/pages\/90\/revisions"}],"wp:attachment":[{"href":"https:\/\/jeffmcnear.com\/wpsvg\/wp-json\/wp\/v2\/media?parent=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}