DIGITAL IMAGES

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

Lossy – reduces file size by permanently eliminating certain information (transitions are averaged)
Lossless – retains raster values during compression (colors can be limited)

GIF – 1987 (lossless)

always reduced to no more than 256 unique colors
can be animated
primitive background transparency – jagged edges
patented by Unisys in 1995
pretty good for icons & logos

JPG – 1992 (lossy)

the most common file type you run across on the web
for photographs not suited to images with text, large blocks of solid color, and crisp edges
compression averages out variances in spectrum of colors & gradients
best for photographic images

PNG – 1997 (lossless)

can save your image with more colors on a transparent background
more efficient compression than GIF
open source
better for icons & logos than GIF

SVG – 1999

wide web support by 2011
purely a vector graphic format – not raster or bitmap!

WAYS TO GENERATE SVG FILES

SUBSCRIPTION

OPEN SOURCE

WAYS THAT WORDPRESS HANDLES SVG FILES DIFFERENTLY THAN OTHER IMAGE TYPES:

SVG files are not resized upon upload so the image size options (full, large, medium & thumbnail) cannot be applied
For the same reason the size percentage settings are not reliable
The viewBox & Style size attributes set in the .SVG file will be the default size of the image (as presented on the front end)
The width control will modify the size of the image – but the height control will not
A containing block will limit the size of the .SVG image regardless of other settings by default

FORMAT COMPARISON

SVG ICON

PNG

JPG

GIF

FILE NAME	SVG	PNG	JPG	GIF
beakers-boiling	2	17	28	5

ALL OF THESE “ICONS” CAME FROM THE SAME 6KB SVG FILE WHERE THE TEXT WAS SET AT 12PX BEFORE EXPANSION

SVG CODE

The .SVG format is the only image format that is expressed in readable code which is designed to be directly manipulated by CSS.

Some syntax basics:

“d” = attribute defines the path to be drawn
the default value for stroke = none
the default value for fill = #000 (black)
recognized shapes: rectangle <rect> ; circle <circle>; ellipse <ellipse>; line<line>; polyline <polyline>; path <path>
for a deeper dive go he re

UN-STYLED

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 645.2">
<path d="m387.3,69.6v2c0,33.2-26.9,60.1-60.1,60.1s-60.2-26.9-60.2-60.1c0-.7,0-1.3.1-2h-32.1v150.4h120.3v116.3h60.2V69.6h-28.2Z"/>
<path d="m296.1,427.5v-116.3h-60.1v266.7h29.1v-.5c0-33.2,26.9-60.2,60.2-60.2s60.1,26.9,60.1,60.2v.5h31.1v-150.4h-120.4Z"/>
<path d="m575.6,376.1c-33.2,0-60.1-26.9-60.1-60.2s26.9-60.2,60.1-60.2c1.7,0,3.4.1,5,.2v-24.8h-150.4v120.3h-116.3v60.2h266.7v-35.8c-1.7.2-3.3.3-5,.3Z"/>
<path d="m220.7,234.3H70.3v20.6h.5c33.2,0,60.1,26.9,60.1,60.1s-26.9,60.2-60.1,60.2h-.5v39.6h150.4v-120.4h116.3v-60.1h-116.3Z"/>
	<circle cx="601.1" cy="317.7" r="48.9"/>
	<circle cx="48.9" cy="317.7" r="48.9"/>
	<circle cx="327.4" cy="48.9" r="48.9"/>
	<circle cx="327.4" cy="596.3" r="48.9"/>
</svg>

STYLED

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 645.2">
<path d="m387.3,69.6v2c0,33.2-26.9,60.1-60.1,60.1s-60.2-26.9-60.2-60.1c0-.7,0-1.3.1-2h-32.1v150.4h120.3v116.3h60.2V69.6h-28.2Z" style="fill:#009;"/>
<path d="m296.1,427.5v-116.3h-60.1v266.7h29.1v-.5c0-33.2,26.9-60.2,60.2-60.2s60.1,26.9,60.1,60.2v.5h31.1v-150.4h-120.4Z" style="fill:red;"/>
<path d="m575.6,376.1c-33.2,0-60.1-26.9-60.1-60.2s26.9-60.2,60.1-60.2c1.7,0,3.4.1,5,.2v-24.8h-150.4v120.3h-116.3v60.2h266.7v-35.8c-1.7.2-3.3.3-5,.3Z" style="fill:#090;"/>
<path d="m220.7,234.3H70.3v20.6h.5c33.2,0,60.1,26.9,60.1,60.1s-26.9,60.2-60.1,60.2h-.5v39.6h150.4v-120.4h116.3v-60.1h-116.3Z" style="fill:#ff0;"/>
	<circle cx="601.1" cy="317.7" r="48.9"/>
	<circle cx="48.9" cy="317.7" r="48.9"/>
	<circle cx="327.4" cy="48.9" r="48.9"/>
	<circle cx="327.4" cy="596.3" r="48.9"/>
</svg>

DIRECT HTML INSERT

SOURCE CODE OF RENDERED SVG

<div class="wp-block-group is-content-justification-center is-nowrap is-layout-flex wp-container-6">

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 645.2">
<path d="m387.3,69.6v2c0,33.2-26.9,60.1-60.1,60.1s-60.2-26.9-60.2-60.1c0-.7,0-1.3.1-2h-32.1v150.4h120.3v116.3h60.2V69.6h-28.2Z" style="fill:#009;"/>
<path d="m296.1,427.5v-116.3h-60.1v266.7h29.1v-.5c0-33.2,26.9-60.2,60.2-60.2s60.1,26.9,60.1,60.2v.5h31.1v-150.4h-120.4Z" style="fill:red;"/>
<path d="m575.6,376.1c-33.2,0-60.1-26.9-60.1-60.2s26.9-60.2,60.1-60.2c1.7,0,3.4.1,5,.2v-24.8h-150.4v120.3h-116.3v60.2h266.7v-35.8c-1.7.2-3.3.3-5,.3Z" style="fill:#090;"/>
<path d="m220.7,234.3H70.3v20.6h.5c33.2,0,60.1,26.9,60.1,60.1s-26.9,60.2-60.1,60.2h-.5v39.6h150.4v-120.4h116.3v-60.1h-116.3Z" style="fill:#ff0;"/>
<circle cx="601.1" cy="317.7" r="48.9"/>
<circle cx="48.9" cy="317.7" r="48.9"/>
<circle cx="327.4" cy="48.9" r="48.9"/>
<circle cx="327.4" cy="596.3" r="48.9"/></svg>

</div>

ALLOWING SVG UPLOAD

While direct insertion of .SVG code into the HTML block will work just fine, getting a .SVG file into the media library is a different thing. By default WordPress does not allow .SVG upload – mainly because the format being code based could contain malicious scripts.

This block of code in a theme’s function file would grant .SVG upload permission

//add SVG to allowed file uploads
function add_file_types_to_uploads($file_types){
    $new_filetypes = array();
    $new_filetypes['svg'] = 'image/svg+xml';
    $file_types = array_merge($file_types, $new_filetypes );
    return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

There are several plugins on the repository that achieve the same end here are the top two:

Both of these plugins will sanitize any uploaded .SVG file before allowing it into the media folder.

The Icon Block Plugin

Nick Diego is a great WordCamp speaker and developer working on the full site editing project. The Icon Block plugin “allows you to add custom SVG icons and graphics to the WordPress block editor… (it) also includes the complete WordPress icon library with 270+ SVG icons to choose from”.

ADVANTAGES

Icons are organized in logical categories
Icons can be easily sized, styled and manipulated
Many of the icons you want and need are already available

Get it here

The toolbar offers these controls:

These are the block settings:

SETTINGS

COLORS

DIMENSIONS & BORDER

There are provisions to insert .SVG code directly into the interface:

If you have .SVG files in the media library, you can select from them:

… and there are provisons to add custom .SVG files into the interface array which he describes here.

… and a user posted this add-on plugin using that information…

The two crucial elements in both are how each icon is expressed:

{
name: 'candle',
title: __( 'Candle', 'custom-icons' ),
icon: '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 660 660" style="enable-background:new 0 0 660 660;" xml:space="preserve"><polygon points="378,655 282,655 282,224.5 378,199.4 "/><rect x="323.1" y="185.7" width="16" height="62.8"/><path d="M331.3,5c-8.3,0.5-48,88.9-48,120.2s21.5,56.6,48,56.6s48-25.3,48-56.6S341,4.4,331.3,5z M331.3,177.4	c-15.9,0-28.8-15.2-28.8-34c0-18.8,23.8-71.8,28.8-72.1c5.8-0.4,28.8,53.3,28.8,72.1C360.1,162.2,347.2,177.4,331.3,177.4z"/></svg>',
categories: [ 'mono' ],
keywords: [ 'process' ],
},

… and how a custom category is created:

const customIconCategories = [
{
  name: 'mono',
  title: __( 'Mono', 'pdog-theme' ),
 },
  {
  name: 'color',
  title: __( 'Color', 'pdog-theme' ),
  },
];

Then the selection of icons will be expanded

IMPORTANT NOTE:

The way the plugin assigns icon color, background color and other icon attributes is via in-line CSS attached to the icon block container div.

UNMODIFIED

MODIFIED

However this depends on the icon having no set colors – if a color is specified within the .SVG file the assignment will be in-line to the specific fill area and so will take precedence over any style attached to the container div…

<div class="wp-block-outermost-icon-block" style="margin-bottom:var(--wp--preset--spacing--30);margin-left:var(--wp--preset--spacing--30);margin-right:var(--wp--preset--spacing--30);margin-top:var(--wp--preset--spacing--30)">

<div class="icon-container has-border-color has-contrast-border-color has-icon-color has-icon-background-color has-contrast-background-color has-cyan-bluish-gray-color" style="background-color:#000000;color:#abb8c3;width:200px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30);border-width:1px;border-radius:50%">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns-xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 660 660" style="enable-background:new 0 0 660 660" xml:space="preserve">
<polyline points="121.6,8.6 314.3,317.5 236.3,279.3 196.5,312.9 208,336.6 227.9,316.8 224.8,301.5 274.5,329 217.2,363.4 	254.6,323.6 234.8,310.6 117.8,436.8 318.1,349.6 276.1,417.7 295.2,434.5 331.1,394 369.4,440.6 384.6,427.6 386.2,410.8 	351.8,353.5 436.6,389.4 452.7,374.9 391.5,335.9 411.4,328.2 397.6,306.8 353.3,318.3 399.2,253.3 377.8,233.4 338.8,287.7 	247,141.6 293.6,168.4 299,147 123.1,4 "></polyline><polygon points="337.2,169.2 551.4,11.6 412.9,229.6 390.8,213.5 454.2,121.8 360.2,189.1 "></polygon><polyline points="346.4,157.7 367.8,143.2 334.9,12.4 287.5,202.1 292.9,210.5 338,113.4 "></polyline>
<polygon points="319.6,165.4 312.8,180.6 449.6,284.6 469.5,272.4 "></polygon>
<polygon points="364.8,187.5 376.2,180.6 383.9,204.4 364,192.1 "></polygon>
<polygon points="360.9,221.9 375.5,228.1 376.2,235.7 367.8,242.6 "></polygon>
<polygon points="399.9,257.1 386.9,281.6 426.7,335.9 438.2,321.4 406.8,260.9 "></polygon>
<polyline points="430.5,296.9 547.5,231.9 435.1,361.1 419.8,351.2 451.2,307.6 438.9,310.6 432.8,299.9 "></polyline>
<polygon points="483.3,312.2 496.3,294.6 544.5,332.1 413.7,444.5 422.9,403.2 503.9,337.4 "></polygon>
<polygon points="444.3,355.8 456.5,340.5 471.1,359.6 458.8,369.5 "></polygon>
<polygon points="292.9,209.7 317.4,187.5 337.2,203.6 307.4,227.3 "></polygon>
<polygon points="255.4,231.1 268.4,248.7 169,332.8 188.9,351.9 168.2,371.8 119.3,336.6 "></polygon>
<polygon points="117,215.8 201.9,267.8 179.7,286.2 "></polygon>
<polygon points="202.6,404.7 225.6,391.7 335.7,465.9 315.8,481.9 "></polygon>
<polygon points="379.3,436.1 370.1,470.5 321.2,504.1 312,488.8 "></polygon>
<polygon points="256.9,449.1 305.9,480.4 331.9,557.6 351.8,513.3 370.1,529.4 335.7,647.1 278.4,471.2 227.1,538.5 283.7,508.7 	291.4,524.8 123.9,647.9 "></polygon>
<polygon points="253.1,280.1 271.5,256.4 279.9,266.3 271.5,290 "></polygon>
<polygon points="247.8,384.8 266.9,374.1 279.9,403.2 269.9,416.2 260,409.3 "></polygon>
<polygon points="232.7,350.2 233.5,349.4 242.8,340.1 246.4,343.9 "></polygon>
<polygon points="333.4,496.5 533,654 405.3,439.1 393.8,468.2 436.6,544.6 356.4,481.9 "></polygon>
<polyline points="368.6,489.6 380.8,500.3 420.6,387.1 400.7,379.5 371.6,479.6 "></polyline>
<polygon points="468,402.4 492.5,381 549.1,447.5 "></polygon>
<circle cx="206.1" cy="212.4" r="24.9"></circle>
<circle cx="469.5" cy="225" r="21.4"></circle>
<circle cx="476" cy="464" r="22.6"></circle>
<circle cx="200.4" cy="457.5" r="24.5"></circle></svg>
</div>
</div>

If the .SVG file has fill colors defined within it then the icon “color” over-ride will not “take” however the other controls (background color, size, margin, padding, border) work just fine:

UNMODIFIED

MODIFIED

Duotone filter

The image block in gutenberg has a built in Duotone filter

Core WordPress includes several duotone sets, and there are provisions for themes to adjust these sets and/or add new ones.

Once a pair has been selected a class is assigned to the block that assigns CSS filters to the container thereby changing the how the image appears:

While the CSS behind this is pretty complex, essentially what is happening is that a “replacement” color is being applied to the dark elements of the image (shadow) and another replacement color is being applied to the lighter elements.

For a deep dive into the CSS at play:

The Duotone selector also will allow the selection of custom colors for the “shadow” and “highlight” colors

In the case of a single color logo or icon there is only one color that can be applied – the shadow … besides the default selections you can set any custom hex value by clicking in the checkered region.

this would allow a color change from black to any color you like!

BEFORE

AFTER

Evanston Web Professionals Meetup Group

Tools & Supplemental Information

Using SVG