Style Declarations

There are four different ways to define presentation properties for an SVG element: presentation attributes, inline styles, internal stylesheets (<style> blocks), and external stylesheets.

selector {
  property1: value;
  property2: value; /* comment */
  property3: value !important;
}

pattern[*|href] /* pattern elements with an
                 href or xlink:href attribute*/
use[*|href="#icon"] /* use elements that clone `icon` */
a[*|href$='.pdf'] /* links to a PDF file */
use:not([*|href^='#']) /* use elements whose cross-references
                          don't start with a `#` target */

Overriding Styles

Once the browser has all your different style rules, it cascades them together with the default values to create a specified value for each property on each element, and then applies inheritance as necessary to create a final used value. For SVG, this works the same as elsewhere in CSS, except that presentation attributes add an extra step to the cascade.

Presentation attributes are treated as an author-level style rule with zero specificity. In fact, they have less than zero specificity, because the zero-specificity universal * selector outranks them.

CSS cascading and specificity rules can be used to create a stylesheet that completely overrules presentation attributes in the code.

For example, you could use CSS overrides to create a separate set of styles for black-and-white printing. Example 3-1 presents such a stylesheet for the grouped primary-color stoplight from Example 1-4 in Chapter 1. (Other versions of the stoplight could have been used, but this one has short and sweet markup.) The print-preview result is shown in Figure 3-1.

Figure 3-1. A minimalist, monochrome stoplight

<?xml-stylesheet media="print"
     href="grouped-stoplight-print-styles.css" ?>        
<svg xmlns="http://www.w3.org/2000/svg" xml:lang="en"
     height="320px" width="140px" >
    <title>Grouped Lights Stoplight</title>
    <rect x="20" y="20" width="100" height="280"
          fill="blue" stroke="black" stroke-width="3" />
    <g class="lights" stroke="black" stroke-width="2">   
        <circle cx="70" cy="80" r="30" fill="red" />
        <circle cx="70" cy="160" r="30" fill="yellow" />
        <circle cx="70" cy="240" r="30" fill="#40CC40" />
    </g>
</svg>

* {                          
    fill: inherit;           
    stroke: inherit;
    stroke-width: inherit;
}
g.lights {                   
    fill: lightgray;
    stroke: dimgray;
    stroke-width: 1;
}
rect {                       
    fill: none;
    stroke: black;
    stroke-width: 2;
}

If there are multiple valid stylesheet rules with the same specificity, the final value is used. To determine which value comes last, different stylesheets (both external files and <style> blocks) are concatenated together in the order in which they are included in the document. This allows you to use an external stylesheet for many documents and then modify it for a particular document using a <style> element. It also allows you to specify fallback styles for new features that may not be universally supported.

Conditional Styles

Declaring styles in CSS stylesheets is often simply a convenience compared to using presentation attributes, allowing you to apply the same style rules to many elements (or many files) without repeating your code. However, with CSS, you can create much greater flexibility in your graphic, by using fallback values, media queries, and interactive pseudoclasses to create styles that adapt to the context.

.stained-glass {
  fill: #FF8888; /* solid pink */
  fill: rgba(100%, 0, 0, 0.5); /* transparent red */
}

.stained-glass {
  fill: #FF0000; /* solid red */
  fill-opacity: 0.5;
}
@supports ( fill: rgba(100%, 0, 0, 0.5) ) {
    .stained-glass {
      fill: rgba(100%, 0, 0, 0.5); /* transparent red */
      fill-opacity: 1; /* reset */
    }
}

@media print {
  /* These styles only apply when the document is printed */
}

Using SVG Images Within CSS

The ability to reference image files from CSS has existed from the earliest versions of the language. Any HTML element that participates in the document layout flow—that is, anything that takes up space on a web page—has a background. The ability to modify this background was one of the first CSS capabilities implemented in contemporary browsers, and as such is quite robust, fully supported by all popular browsers still in common use.

The background-image property, like any CSS property that accepts an image, takes a URL value, contained within the url() function:

background-image: url('/images/myImage.jpg');

The quotes around the argument in the url() function are recommended, but can often be omitted, so long as the URL only contains ASCII characters with no whitespace.

The URL could be global, starting with a protocol (https://), or at least a double slash (//):

• https://www.example.com/images/myImage.jpg

Or it could be local, starting with a single slash (/), meaning it is on the same server as the web page:

• /images/myImage.jpg

Or relative to the current web page or stylesheet location:

• myImage.jpg
• ../images/myImage.jpg

The HTML5 specification, when describing SVG as a required format for images, states that it should also be valid format for background-image in CSS-styled HTML.

This means that if you have an SVG file, such as myImage.svg, you can use it in exactly the same manner as you could use a JPEG, GIF, or PNG file, in any modern browser:

background-image: url('/images/myImage.svg');

If you want to provide fallback images for older browsers that don’t support SVG, you have a few options:

• Use a JavaScript tool, such as Modernizr, to test whether SVG images are supported and change the classes (and therefore style rules) on your elements accordingly.

• Use a server script to identify the old browsers and edit your web page to use different style rules.

• Use Internet Explorer conditional comments to include a stylesheet that overrides your main style rules (this doesn’t help with older mobile browsers that don’t support SVG).

• Use other modern CSS syntax not supported by the older browsers, such as layered background images and CSS gradients, to make the browser ignore the background image declaration that includes SVG, and apply fallback declaration instead.

The layered-image fallback approach looks like the following:

background-image: url('/images/myImage.jpg'); /*fallback*/
background-image: url('/images/myImage.svg'),
                linear-gradient(transparent, transparent);

This prevents the SVG file from being downloaded in both old Internet Explorer and old Android browsers.

Although backgrounds are the most common use for images in CSS, there are currently three other well-supported properties that accept image values:

list-style-image

Specifies a custom graphic to replace the bullet or number for a list element (technically, any element with CSS display type list-item).

border-image

Generates decorative frames for elements.

content

Provides content to be used in the ::before and ::after pseudoelements, as a series of text strings and/or images. The images are displayed at their natural size, like a series of inline block elements, so this is best only used for small icons with defined sizes in the SVG file.

Figure 3-2. A web page using SVG graphics as CSS backgrounds, bullets, and borders

Example 3-2 applies all four properties to an HTML web page, using card suit shapes that we’ll learn how to draw in Chapter 6. The (somewhat intense-looking) web page that results is shown in Figure 3-2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" >
    <title>Using SVG in CSS for an HTML page</title>
    <link rel="stylesheet" href="svg-in-css.css" />
</head>
<body>
    <h1>Card Sharks</h1>
    <ul>
        <li>First point</li>
        <li>Second point</li>
        <li>Third</li>
        <li>Fourth</li>
        <li>And another</li>
        <li>One more</li>
        <li>In conclusion</li>
        <li>This is the last point</li>
    </ul>
</body>
</html>

body {
    margin: 0 1em;
    font-family: sans-serif;
    color: navy;

    background-color: red;                                    
    background-image: url('../ch06-path-files/spade.svg'),
                      url('../ch06-path-files/heart.svg'),
                      url('../ch06-path-files/club.svg');     
    background-size: 40px 40px;
    background-position: 0 0, 20px 0, 20px 20px;              
}
h1 {
    text-align: center;
    border-radius: 2em / 50%;
}
h1::before, h1::after {
    display: block;
    content: url('../ch06-path-files/diamond.svg')
             url('../ch06-path-files/spade.svg')
             url('../ch06-path-files/heart.svg')
             url('../ch06-path-files/club.svg');             
}
h1, ul {
    background-color: white;
    background-color: rgba(100%, 100%, 100%, 0.85);
    max-width: 70%;
    margin: 0.5em auto;
}
ul {
    padding: 1em;
    padding-left: calc(1em + 10%);
    border: solid #999 1em;
    border-radius: 10%;                                       

    border-image-source: url(svg-in-css-border-gradient.svg); 
    border-image-slice:  5% 5%;
    border-image-width:  4.7%; /* = 5% / 105% */
    border-image-repeat: stretch;
}
li {
    line-height: 2em;
}
ul li:nth-of-type(4n+1) {                                     
    list-style-image: url('../ch06-path-files/diamond.svg');
}
ul li:nth-of-type(4n+2) {
    list-style-image: url('../ch06-path-files/spade.svg');
}
ul li:nth-of-type(4n+3) {
    list-style-image: url('../ch06-path-files/heart.svg');
}
ul li:nth-of-type(4n+4) {
    list-style-image: url('../ch06-path-files/club.svg');
}

The stylesheet presented in Example 3-2 references five separate SVG image files. Each one is only a few hundred bytes in size before compression, but requesting each file from the web server may slow display of the web page.

Making Every File Count

There are various options to reduce the number of file requests when you have a large number of small SVG graphics:

• Construct a single sprite image, with the separate icons arranged in a row or grid, to use as a background-image file for multiple elements. Then use the background-size and background-position properties to position the sprite file in such a way that the correct icon is visible.

  This technique has been used for years with raster image sprites; there is nothing specific to SVG about it. However, it only works for background images—there are no similar size and position options to reposition a list image file.

• Create a sprite image as above, but add <view> elements that describe the target region for each icon. Then specify the ID of the relevant view as the target fragment (after the # mark) in the URI.

• Create an SVG stack file, with your different icons overlapping in the same position. Then use the CSS :target pseudoclass to only display each graphic if it is referenced in the URL target fragment.

• Convert each image reference to a data URI, which allows you to pass an entire file’s contents in the form of a URI value.

We’ll discuss SVG views and stacks in Chapter 9. Theoretically, they should be usable anywhere you use an SVG image file (in CSS or in HTML), since all the information about position and size is contained in the SVG code and the URL fragment. However, at the time of writing there are serious limitations on browser support in WebKit, and in many older Blink browsers still in use (e.g., on Android).

That last option is worth a longer discussion. It’s currently the recommended approach for embedding very small SVG files in a CSS file, such as might be used for custom list bullets or simple background patterns.

A data URI is an entire file encoded in a URL string. You can therefore use it anywhere a URL is required, without needing to download a separate file.

To use data URIs, you specify the data: file protocol, the media type, optional encoding information, and then the file contents as a URI-safe string. Many browsers allow you to pass a simple SVG file as plain-text markup, with only %, #, and ? characters encoded (since these have special meaning in URIs). However, for cross-browser support, you also need to URL-encode all ", <, and > markup characters and any non-ASCII Unicode characters.

You can guarantee compatibility by using the JavaScript encodeURIComponent(string) method to encode your plain-text markup. The result would be entered in the following code to create a data URI:

url("data:image/svg+xml,URI-encoded ASCII text file");
url("data:image/svg+xml;charset=utf-8,URI-encoded
            Unicode file");

Be sure to use a complete, valid SVG file to create your data URI, including XML namespaces. However, you can minify the file as much as possible before encoding, in particular to remove extra whitespace.

Taylor Hunt has discovered that you can keep the encoding URI size smaller by using single-quote characters (') instead of double quotes (") in your markup; the single quotes do not need to be escaped in a URL, so long as the entire string is surrounded by double quotes. His article on SVG data URIs has a more detailed JavaScript function for making optimal data URIs. Jakob Eriksen used the same approach to create a Sass CSS preprocessor function. And Dave Rupert turned it into a copy-and-paste website, if you’re only encoding a few short graphics.

For raster image files—which don’t have a plain-text representation—data URIs use the base-64 encoding algorithm. Base-64 encoding converts the raw binary data of a file to a string using 64 URL-safe characters.

Base-64 encoding is not recommended for SVG data URIs in CSS or HTML files, because the end result cannot be compressed (with Gzip or Brotli) as effectively as a URL-encoded text. Even uncompressed, it may be longer than an optimal URI-encoded version.

Nonetheless, base-64 encoding is the best choice for encoding many other file types that you might wish to embed in your SVG file itself. The JavaScript function btoa(data) converts file data to base-64 encoding, and there are also lots of online tools that can convert a file. The result is embedded as follows:

url("data:image/jpeg;base64,base64-encoded JPEG file");

For different file formats, replace the JPEG media type (image/jpeg) as needed.

Using SVG Effects Within CSS

We have already seen, in Chapter 1, how an SVG presentation attribute can reference another SVG element using the url() notation. In that case, it was a fill property referencing a gradient element:

<use xlink:href="#light" y="80" fill="url(#red-light-off)" />

Other SVG style properties follow the same syntax: you define the details of the graphical effect you want to apply in the SVG markup, and then apply that effect to another element using a url() reference.

For masks, clipping paths, and filters (which we’ll discuss in Chapters 15 and 16), these graphical effects can now also be applied to non-SVG content in the latest web browsers. Proposed new CSS modules would also allow SVG gradients and patterns to be used directly as image sources or text fill.

To reference a graphical effect, use a URL that contains a # targeting the reference to a specific element’s id.

Theoretically, the URL for most effect properties can reference an element in a different file, either as a local relative URL or an absolute URL (e.g., to a content-delivery network serving up your static image assets). However, browser support for cross-file references varies, and depends on the property.

Even when external files are supported, you can’t just reference an SVG filter or mask from someone else’s website (a cross-origin reference). We talk more about cross-origin issues in “File Management”.

If the URL is either a local target fragment like url(#filter), or a relative file path like url("../assets/filters.svg#blur"), the URL will be resolved relative to the file that contains the CSS rule. This means that local target fragments can only be used for <style> blocks, inline styles, and presentation attributes—never an external stylesheet, which cannot contain valid SVG elements.

The location of relative URLs, including local target fragments, will also be affected by the HTML <base> tag and by xml:base attributes, which instruct the browser to treat all relative URLs as being relative to a different web address.

With SVG graphical effects, combining many effects into a single file is not a problem: the URL references always target a specific element. Unfortunately, for the time being that file is usually your main web page, not a reusable asset file.

Styling Documents Versus Drawing Graphics

The tension between CSS and SVG is driven by their differing goals of formatting documents versus rendering graphics. Both are involved in handling layout; both control the incorporation of images, colors, and patterns; and both determine how text gets rendered. It’s easy to get lost in the overlap; some CSS properties work in SVG just the same as in HTML, while others are completely different.

It helps to focus on the different purposes of the two languages.

CSS was designed to describe the presentation of text documents. It assumes that most of the elements in the document contain text. CSS rules define the regions of the web page in which the text should be arranged (layout boxes), the decoration of those boxes, and the styling of the text itself. For the most part, the text is treated as a continuous stream that can be wrapped from one line to another to fit within the layout boxes. When you change the available space for each line, the layout will be rearranged: text wrapping at different points, boxes expanding to fit more or fewer lines of text, and the overall page layout shifting to accommodate them.

In contrast, SVG defines a two-dimensional graphic. There is no single flow of content that can be wrapped to a new line if there isn’t enough space on this one. The entire SVG expands or contracts together, preserving the relative positions of all the elements in both horizontal and vertical directions.

The shape and position of SVG elements are a fundamental part of their meaning and purpose. In contrast, the fundamental meaning of HTML elements is contained in their text content and the semantic meaning associated with the HTML tags; the shape and position of the CSS layout boxes is (usually) pure decoration.

When you add a border to a CSS layout box, it takes up extra space around the outside of the box, and the layout adjusts to accommodate it. In contrast, when you add a stroke to an SVG shape, it is positioned exactly centered over the geometric edge of the shape. If that stroke overlaps something else, it’s up to you to decide whether to move or resize the shapes to accommodate it; the browser makes no assumptions about why you’re drawing graphics in the particular places you specify.

Many other syntax differences come from this difference between styling independent, flexible boxes versus drawing graphics that are explicitly positioned by x- and y-coordinates. Even for the CSS features that have been adapted from SVG, such as transformations (Chapter 11) or masks (Chapter 15), new rules were required to apply the effects to elements that aren’t part of a fixed coordinate system.

Nonetheless, although CSS layout and style properties were created to format text documents, they can just as easily be applied to empty elements in order to construct purely graphical content. It is with this usage that CSS becomes a direct competitor to SVG.

CSS as a Vector Graphics Language

As described in Chapter 1, vector graphics describe where and how a computer should draw an image, rather than describing the pixelated result. In this way, the combination of an HTML document plus CSS stylesheet can be seen as a vector language; together, they describe how the browser should display the web page.

Most web pages do not use the precise coordinate-system layout usually associated with vector graphics. However, CSS absolute positioning can be used to provide coordinate-like positioning, placing elements at a certain point on the page regardless of the flowing layout of the text. CSS also allows you to set the width and height of elements exactly, regardless of the width available or the height required to display their text content.

With these properties—and the many styles available to decorate CSS boxes with borders, backgrounds, and more—CSS can turn a nested series of HTML elements into a vector graphic. Example 3-3 uses CSS and HTML to recreate the original, primary-color stoplight from Chapter 1. Figure 3-3 shows the result, which is very close to Figure 1-1.

Figure 3-3. The CSS vector graphic stoplight

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Stoplight Drawn Using CSS Styles</title>
    <style>
        /* Style rules go here (or as an external stylesheet) */
    </style>
</head>
<body>
    <figure aria-label="A stoplight">                  
        <div class="stoplight-frame" >                 
            <div class="stoplight-light red" ></div>   
            <div class="stoplight-light yellow" ></div>
            <div class="stoplight-light green" ></div> 
        </div>
    </figure>
</body>
</html>

figure {                      
    margin: 0;
    padding: 0;
}
.stoplight-frame {            
    margin: 20px;
    width: 100px;
    height: 280px;
    background-color: blue;
    border: solid black 3px;
    position: relative;       
}
.stoplight-light {            
    width: 60px;
    height: 60px;
    border-radius: 30px;
    border: solid black 2px;
    position: absolute;       
    left: 20px;
}
.stoplight-light.red {        
    background-color: red;
    top: 30px;
}
.stoplight-light.yellow {
    background-color: yellow;
    top: 110px;
}
.stoplight-light.green {
    background-color: #40CC40;
    top: 190px;
}

The example may be simple, but it demonstrates some common features in CSS vector graphics:

• Although CSS elements are by default rectangular, the border-radius feature can be used to create circles or ellipses.

• You can position elements using margin and padding, but it is usually more reliable to position them absolutely.

• You can use one element as the reference frame for absolutely positioning other elements by nesting them in the HTML, by giving it a nondefault position value.

In Chapter 12, we will expand upon this simple stoplight example to recreate the gradient effects from Figure 1-4 using CSS gradients.

Which to Choose?

If you can create vector graphics with CSS, why bother learning SVG? It really depends on what type of graphics you’re trying to create.

For advanced graphics, SVG has the undoubted advantage. CSS can create simple rectangles and circles, but other shapes require clipping paths (which aren’t well supported) or complex nested structures. There is also much better browser support for graphical effects in SVG, and more flexible options for decorative text.

For graphical decorations on a text document, however, CSS styling may provide a simple solution. For a simple background gradient, styling with CSS is easier than creating a separate SVG file, encoding it, and embedding it as a data URI in your CSS file. By taking advantage of the ::before and ::after pseudoelements available on most elements, you can create moderately complex decorations such as turned-down corners, menu icons, or stylistic dividing rules.

When the CSS graphic requires more than the three layout boxes you can create from a single element, simplicity is compromised. Creating a scaffolding of HTML elements to represent each part of the graphic, as we did in Example 3-3, divides your graphical code between the CSS and the markup. Although the same could be said about inline SVG graphics with external stylesheets, it is generally easier to distinguish SVG graphical markup from the rest of the HTML content of the web page. SVG’s <use> element, in particular, makes it easier to organize your graphical markup into a single section of your HTML file.

Compatibility adds another layer of complexity. For the most part, browsers either support SVG or they don’t; certain effects may not always render the same, but the geometric structure will be consistent. In contrast, when you’re building CSS vectors, the geometric appearance often depends on relatively recent features of the language. Without support for border-radius, the stoplight would have been barely recognizable.

This book focuses on SVG, and so it will for the most part emphasize the SVG way of creating vector graphics. However, this is also intended to be a practical reference for web designers, so the question of CSS versus SVG will be revisited regularly throughout the rest of the book. Whenever an SVG feature is introduced that has a CSS counterpart, the two will be compared and contrasted to highlight the key differences in how they work.