Inserting svg into css. Adding SVG to a Page Using a Tag

An in-depth article on styling content in an SVG element and overcoming the associated problems.

Graphics in SVG format are especially often used for creating icons and one of the most common techniques for this is SVG sprites using SVG use to instantiate icons in the right place document.

Instantiating icons or any other SVG content in an element causes difficulties in the design of individual copies. The purpose of this article is to give you an overview of some possible ways bypass design restrictions associated with use .

But before we get started, let's take a quick look at the basic structure and grouping of elements in SVG, gradually moving on to , DOM, and then back to CSS. We will analyze why the design can cause difficulties and how to overcome them.

A quick tour of SVG structure, grouping, and element referencing in SVG

SVG includes 4 basic elements for defining, structuring, and referencing SVG content in a document. These elements allow for reusability of images, while keeping the code readable and maintainable. Due to the nature of SVG, some of these elements have functionality similar to the corresponding commands in image editors.

The 4 main grouping and binding elements in SVG are , , and .

Element (short for “group”) is used to logically group sets of related graphic elements... In terms of graphic editors (such as Adobe illustrator) element in functionality it is similar to the function “Group objects”. You can also think of a group as a layer in graphic editor.

Grouping elements is useful when you want to apply a style to all elements in a group, and also when you want to animate all elements in a group while maintaining the relationship between them.

Element used to define many things, mainly defining patterns like gradients that can then be used to fill other SVG elements. It can be used to define any elements that you intend to use anywhere on the canvas.

Element combines the possibilities and in that it is used to group elements with the definition of a template that can be referenced elsewhere in the document. Unlike , not used for setting patterns; it is generally used to create symbols, such as icons, which are then applied throughout the document.

Element there is one more important advantage: it takes a viewBox attribute which allows scaling within any scope.

Element allows you to use a previously defined element anywhere in the document. It allows you to reuse elements, provides functionality similar to copy-pasting in a graphics editor. With it can be used as separate element, and the group given in , or .

To use an element, you need to pass a link to that element, the identifier is the xlink: href attribute and position it by specifying the x and y attributes. You can apply styles to an element and they will cascade to the content of that element.

But what is the content ? Where is it cloned to? And how does the CSS cascade work with it?

Before answering these questions, and given that we were just a quick glimpse at the structure and grouping of SVGs, it's worth mentioning a couple of articles that will allow you to learn more about these elements, as well as the viewBox attribute on an element. :

• Structuring, Grouping, and References in SVG - The g, use, defs, and symbol elements
• Understanding the SVG Coordinate System (Part 1): Viewport, viewBox and PreserveAspectRatio

SVG and shadow DOM

When you reference an element with , your code looks something like this:

An icon is displayed on the screen, the content of which is defined inside , but actually this is the content of the element which is a clone .

But the element this is just one self-closing element - there is no content between the opening and closing tags, so where is the content cloned ?

The answer is in shadow DOM(for some reason I always associate him with Batman, I don't know why).

What is Shadow DOM?

The shadow DOM is identical to the regular DOM, except that instead of being part of the main document tree, shadow DOM nodes refer to a portion of the document that is parallel to the main document, but not accessible to its scripts and styles. This gives authors the ability to create modular components by encapsulating scripts and styles. If you've ever used the video element or range input in HTML5 and don't understand where the video player controls or slider came from, then the answer is the same - shadow DOM.

In the case of the SVG element , the content it refers to is cloned into the document fragment “hosted” in ... V in this case this is a shadow host.

So the content is (a clone or copy of the element it refers to) is present inside the shadow portion of the document.

In other words, the content is there, but it is invisible. Same as regular DOM content, but not accessible by high-level tools like CSS and JavaScript selectors, copied into a document chunk bound to .

Now, if you are a designer, you might be thinking, "OK, I get it, but is there a way to inspect this subdocument and see its contents." The answer is yes, you can view the contents of the shadow DOM using the development tools in Chrome (in Firefox at this moment this function is not available). But first, you need to activate the shadow DOM inspector in the General tab of the settings panel. This is described in detail.

After you have enabled shadow DOM inspection in the developer tools, you can see cloned elements in the toolbox, just like regular DOM elements. The following image shows an example of an element referencing the content of the element ... Note that “# shadow-root” and its content are clones of the content .

Using tools Chrome developer, you can inspect the contents of the use element inside the shadow DOM (“# shadow-root”, the line is grayed out). This screenshot inspects the Codrops logo from the example we'll look at in the next section.

Looking at the inspected code, you can see that the shadow DOM is very similar to the regular DOM, except for how it is handled by the CSS and JavaScript of the main document. There are also other differences between them, which we will not cover in this article due to their volume, so if you want to know more, I recommend you the following articles:

• Shadow DOM 101 (translated by Frontender.info)
• Introduction to Shadow DOM (Video)

Given my limited experience with the shadow DOM, I see it as a regular DOM that needs to be handled differently in terms of CSS and JavaScript access to its elements. This is what matters to us when working with SVG: How to Affect Content inside the shadow DOM, because it's important for us to be able to style it. The whole point of use it is the ability to create different copies of an element and in most cases we need to be able to style each copy differently. For example, it can be a logo in two color themes or multi-color icons for different color themes. So it's important for us to be able to do this with CSS.

As said, the content of the shadow DOM is not available to CSS, unlike regular DOM. So how do we style it? We cannot use a descendant path like this:

Use path # line (stroke: # 009966;)

Because we don't have access to the shadow DOM using regular CSS selectors.

Perhaps, as I do, you expect presentation attributes to have the highest specificity of any style rule. After all, usually external styles are rewritten by internal declarations, and they, in turn, are rewritten by inline attribute styles - they have the maximum specificity, and, accordingly, priority over other styles. While this expectation makes sense, the actual mechanism is different.

In fact, presentation attributes are considered low-level “authoring style sheets” and are overwritten by the rest of the style declarations: outer, inner, and inline styles. Their only strength is their priority over legacy styles. And that's all.

Now that we've figured it out, let's go back to our element and its contents.

We know that we cannot set styles inside using CSS selectors.

But we also know that as with the element , styles applied to will be inherited by all of its descendants (which are in the shadow DOM).

So, first let's try to change the fill color of the element inside by applying the selector to the element itself with the expectation that the cascade and inheritance will do their job.

However, this begs a couple of questions:

1. The fill color will be inherited all descendants element , even those that you don't want to style (but if inside you have only one item, then this problem will not be).
2. If you exported SVG from a graphics editor, or for some other reason cannot modify the SVG code, then you will end up working with SVG that already has presentation attributes applied (unless you explicitly override this when exporting to SVG format) and the values ​​of these attributes will take precedence over those inherited from .

And even if you can edit the SVG code and can get rid of them, I highly recommend not to do so by following reasons:

1. Removing attributes for the sake of setting certain properties later will reset the values ​​of these properties to their default values, which, as a rule, are black fill and stroke (as applied to colors).
2. By resetting the values, you force yourself to style the entire set of properties.
3. The presentation attributes that are initially set are a great fallback in case you run into problems with the outer styles. If the CSS doesn't load, your icons will still look great.

So, we have these attributes, but at the same time we want to design different instances of icons in different ways.

This is done by forcing presentation attributes to inherit the styles specified by or finding a way to work around the overrides of these values. To do this, we'll have to harness the full power of CSS cascading.

Let's start with simple examples and gradually move on to complex ones.

Rewriting presentation attribute values ​​with CSS

Presentation attributes are overridden by any style declaration. We can use this in order for the presentation attribute to get the value inherited from the styles. .

This is simply due to the key CSS word inherits. Take a look at next example- an ice cream icon drawn with one outline, the color of which we want to change in different instances. Icon created by Erin Agnoli of the Noun Project.

The content of our ice cream icon (path) is defined inside the element , which means that it will not be displayed on the canvas by default.

We display multiple instances of the icon using .

We set the width and height of the icons using CSS. I am using the same dimensions as the viewBox, but they don't have to be identical. However, to avoid excess white space inside the SVG, make sure you maintain aspect ratio.

Icon (width: 100px; height: 125px;)

With this code, we got the following output:

Notice that thanks to the added black borders around our SVGs, you can see the borders of each one, including the first one, in which the content is not rendered. Remember: the SVG document in which you defined the symbol will be displayed on the page, but no content... To prevent this, use the display: none property on the first SVG. If you don't hide SVG with icon definitions, it will be displayed on the screen even if you don't set dimensions for it - it will take the default 300 by 150 pixels (this is the default value for non-replaceable elements in CSS) and you will get an empty block you don't need on the screen ...

Now let's try to change the fill color for each instance of the icon:

Use.ic-1 (fill: skyblue;) use.ic-2 (fill: # FDC646;)

The fill color of the icons still does not change, as the inherited color is overwritten with the fill = "# 000" attribute in the path element. To prevent this from happening, we need to force path to inherit the color:

Svg path (fill: inherit;)

Voila! Colors, given to elements are now applied to the path of each one. Check out the demo and experiment with the values ​​by instantiating and setting them different colours:

Now this technique works after we have forced the content inherit styles. But in many cases, this is not exactly what you want. There are other ways of design, we will now turn to some of them.

Content decoration using the CSS all property

Some time ago, when working on an icon activated with , I needed one of the elements inside it to inherit all the styles such as fill, stroke, stroke-width, opacity and even transform. So I needed to control all of these attributes through CSS, while keeping all the presentation attributes in the markup as a fallback.

If you run into a similar task, you probably decide that it will take too long if you do everything in CSS:

Path # myPath (fill: inherit; stroke: inherit; stroke-width: inherit; transform: inherit; / * ... * /)

After examining this snippet, you will notice a pattern, which means that it would make sense to combine all the specified properties into one and set it inherit value.

Fortunately, it will help us CSS property all. My CSS reference mentions using the all property for SVG styling, but it's worth brushing up on our knowledge.

Using the all property we can do this:

Path # myPath (all: inherit;)

This works fine in all browsers that support all, however the following should be considered important point: This declaration tells the element to inherit literally all the properties of its parent, including those you don't want to set on the element. Therefore, if you do not want all CSS properties to be styled, this will not work for you - this is a last resort and it is only partially suitable when you have an unstyled element and full control above its properties in CSS. If you use this declaration and do not define values ​​for all CSS properties, they will cascade until they find a value to inherit, in most cases these are browser default styles.

Note that this only applies to attributes that can be set using CSS, not attributes that can be set in SVG only. If the attribute can be set using CSS it will inherit the styles, otherwise it won't.

Ability to activate inheritance of presentation attributes of all styles , but what if you have an icon consisting of several elements and you don't want them all to inherit the same fill color? What if you want to apply multiple different colors fill for different descendants? Setting one style in no longer fits. We need something different to cascade the colors you want To the necessary elements.

Using the CSS variable currentColor to style content

Using the CSS variable currentColor in conjunction with the technique described above allows you to define two colors for an element, rather than one. Fabrice Weinberg wrote about this a year ago.

The idea is to simultaneously apply to fill and color properties and then cascade those properties to content using the capabilities of the currentColor variable. Let's take a look at the sample code to see how this works.

Let's say we want to style this minimalistic Codrops logo using 2 colors - one for the front blob and one for the back.

First, let's start with the code for this image: we have a symbol containing a description of the icon and three instances creating three copies of the logo.

If we set the fill color on the element for each instance, this color will be inherited by both blobs, which is not our goal.

So instead of defining a fill color and cascading it the usual way, we will use the variable currentColor so that the smaller foreground blob has a different color and we will set this value with color properties.

First, we need to insert currentColor where we want to apply this color - this will be the place in the markup where the icon is defined, that is, inside ... Now this snippet looks like this:

Then we need to remove the presentational fill attribute from the second blob and let it inherit the fill color from the element. using inherit.

If we were to use the inherit keyword to force presentation attributes to inherit values ​​from , both parts would inherit the same value and currentColor would have no effect. Therefore, in this technique, we need to remove the attribute that we want to set through CSS, and leave only the one in which we will use currentColor.

Now using the fill and color properties in we will add styles to the blob from the logo:

Codrops-1 (fill: # 4BC0A5; color: # A4DFD1;). Codrops-2 (fill: # 0099CC; color: # 7FCBE5;). Codrops-3 (fill: # 5F5EC0; color: #AEAFDD;)

Every element gets eigenvalue fill and color. In each of them, the fill color cascades and fills the first path that does not have a fill attribute, and the color of the color property is used to set the fill attribute on the second path.

So what happened is the current color value leaked into the element's content styles by using the currentColor variable. Graceful, isn't it?

Here's a demo with the code used:

This two-tone technique is great for two-tone logos. In his article, Fabrice created three different versions of the Sass logo by changing the color of the text relative to the background.

The currentColor keyword is the only available CSS variable at the moment. However, if we had more variables, we could use them to fill in more more values ​​in content ? Yes, they could. Amelia Bellamy-Royds introduced the concept to this a year ago on her blog on Codepen. Let's see how it works.

The future: content styling using CSS variables

The robot's code contains all its constituent colors:

Now, we won't be using CSS variables as fill attribute values ​​for each outline. Instead, we'll use them as fill colors using the CSS fill property, keeping all fill attributes in place. These attributes will be used as a fallback for browsers that don't support CSS variables - the image will look as it was if CSS variables don't work.

With added variables code will be as follows:

Since inline style tags overwrite presentation attributes, browsers that support CSS variables will use those variables to set the fill color. And browsers that don't support them will use the fill attribute.

Then we need to set values ​​for the variables in CSS. But first, instantiate the image with :

After that, we will set the values ​​of the variables for use so that they can cascade to its content. The colors you choose will create color scheme picture. Since our robot uses three primary colors, we will name them primary, secondary and tertiary.

# robot-1 (--primary-color: # 0099CC; --secondary-color: # FFDF34; --tertiary-color: # 333;)

You can still use the fill and color properties with these variables, but you can do without them altogether. So, with the colors set in our variables, the robot looks like this:

You can use as many copies of the image as you like and for each of them specify a set of different colors by creating various topics... This is partially useful when you want to style your logo. different ways depending on the context and in other similar cases.

As mentioned, browsers that do not support CSS Variables use the given presentation attributes as a fallback, while browsers that do not support CSS Variables use them to fill the fill property and rewrite the attributes. But what happens if the browser supports CSS variables, but you forgot to set these variables in your styles, or you set an incorrect value?

For our hipster robot, we set three variables and only a few of its fragments do not depend on them - after all, it was originally developed for possible theming. Therefore, if you run this code in a browser with support for CSS variables and remove all declarations with these variables, you will get the following result:

If variable values ​​are not set or are not correct, the browser will use its default color, which is usually black for fill and stroke in SVG.

You can work around this by setting a different color as a fallback for supporting browsers. The syntax for CSS variables allows you to do this: instead of passing the var () function the name of the variable as an argument, you pass two arguments separated by commas - the variable name and fallback, in this case it will be the value for the presentation attribute.

So, now the code of our robot looks like this:

And it's all. If a variable is not set to a value, the browser will always have a fallback color in stock. Wonderful.

Using this technique, you can display this robot anywhere on the page with setting different colors for each instance and getting different color themes eventually.

You can experiment with the demo, create as many copies of the robot as you like, and color it in any colors - just remember to use a browser with support for CSS variables:

If you view this demo in a browser with support for CSS variables, then, among others, you will see a blue and yellow version of the robot, as we specified in the CSS variables. Otherwise, you will see three identical robots with a fallback color.

Summing up

It was a great article.

Using the power of the CSS cascade to style the content stored in the shadow DOM becomes less complex. And with CSS variables (currentColor or custom properties) we can sneak into the shadow DOM and customize our graphics however we want, while creating a fallback in case of problems.

Personally, I really like the combination of CSS and SVG variables. I love their joint functionality, especially in terms of creating a fallback mechanism.

We may also get other ways to style the content. in the future, as discussions continue about using CSS variables as SVG parameters - so this article does not cover everything there is to know about this topic.

Working with reusable SVG content is one of the tricky topics of SVG, it has to do with the behavior and location of the cloned code. This raises a lot of related questions that can become the topic of separate articles.

Scalable Vector Graphics (SVG) support is excellent across all modern browsers The image format appears in amazing contexts on many different web pages. But even though it has been the standard for nearly two decades, SVG remains a somewhat new format for some designers and developers, leaving them confused as to how it should be used on a site. Here are some reasons why you should use SVG:

Tiny file size

Well-designed, typical SVGs are much smaller than the equivalent PNGs, which means pages that use them load faster for users.

Scalability

Since SVG is built from mathematical formulas, not fixed pixels bitmap graphics SVG images can be scaled up and down without loss of quality, making them ideal for modern responsive sites.

Interacts with the DOM

SVG is sometimes referred to as "drawing with markup": every element in the SVG image interacts with the DOM, which means that CSS and JavaScript can manipulate parts of the SVG document. Unlike bitmap graphics, each individual shape in SVG can have its own identifier or class.

Easy to modify and adapt

The quality of SVG components means that well-formed SVG documents can be easily modified in any text editor without the need for specialized programs required for bitmaps. And since SVG interacts with the DOM, its elements can be modified using CSS. SVG format is great for displaying:

logos

• illustrations and drawings

SVG tools

While you can create an SVG document using any text editor, vector illustration programs such as Adobe Illustrator or Inkscape are usually the best choice(although it should be noted that other applications including 3D programs such as Blender and server applications, can export SVG).

Whatever you use, you should be aware that creating SVGs from applications still leaves a lot to be desired at times: the resulting document is often recoded and sometimes poorly formatted. The svg file can be made smaller, more compact by processing it with an optimizer such as SVGOMG. Sometimes passing the wrong svg document through the W3C validator can help you pinpoint problems.

SVG integration

There are three main ways SVG can be used directly on a web page:

Since SVG is based on XML, it can be directly integrated into the code on your page. SVG code reduces latency and overall load time for your page.


Like bitmaps, the SVG file can be referenced by tag or via CSS as a background image. This is often The best way unless SVGs need the individual attention of CSS and JavaScript.


Inserted as