How to change color in svg. External styling files for SVG inserted using
CSS is becoming more powerful every day, with many new features appearing with which to create user interfaces much easier. And that is great!
One such feature in CSS is filters. Let's try using filters to work with SVG images mi.
CSS filters
First, let's take a look at filters. They include the following features:
- blur()
- brightness()
- contrast()
- drop-shadow()
- grayscale()
- hue-rotate()
- invert()
- opacity()
- saturate()
- sepia()
CSS filters are the easiest way to implement basic transformations in a browser-efficient manner.
If you want to see how each filter works, we recommend visiting the website: cssfilters.co.
Editing SVG backgrounds
I love using SVG (scalable vector graphics) format on the web. SVG is a great image format for the web. When you add an SVG to a page, you have access to every element and property within it. This allows you to add animation, change colors, and dynamically add information. SVG is also great for icons.
SVG is often used as background images. IN in this case You lose control over the elements of the image. You now cannot change colors or properties, since the SVG becomes a regular image. But with the help CSS filters you can solve this problem.
Brightness adjustment
The first thing I encountered when working with icons was the need to darken a white icon on a light background. To avoid creating a new dark icon, I used filter: brightness().
A brightness value greater than 1 makes the element brighter, less than 1 makes the element darker.
Icons with color #000 or rbg(0, 0, 0) will not be clarified. They must be any other color.
Color adjustment
We looked at how to change the brightness of the icon. But what if we want to change the color of the icon? In this case, a filter will help us sepia, hue-rotate, brightness And saturation to create any color we want.
From white you can create, for example, blue, cyan and pink.
Colorize-pink ( filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5); .colorize-navy ( filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate( 5); .colorize-blue ( filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6); )
Compatibility
At the time of writing, filters are supported by the following browsers:
Instead of a conclusion
Never forget about your users. So far, filters do not work everywhere. Therefore, do not use white filter icons on a white background, as some users simply will not see anything. Also, don’t forget about alternative text for images.
Original article: link Author of the article: Alex. Category:
Date of publication: 04/01/2018
SVG is a vector graphics format. Its name literally means “scalable Vector graphics"(Scalable Vector Graphics). Simply put, this is what you work with in Adobe Illustrator. SVG can be easily used on the web, but there's a lot to understand first.
Why do you need SVG at all?
- Small file sizes, excellent compression;
- Scaling to any size, without loss of quality (except for very small sizes);
- Looks good on retina;
- Wide range of possibilities provided by filters and interactivity.
Let's create an SVG image that we will work with next
Create a custom drawing in Adobe Illustrator. Here, for example, is a kiwi bird on an oval.
Please note that the image is cropped sharply around the edges of the image. The canvas in SVG plays no less a role than in PNG or JPG.
Adobe Illustrator can save as SVG.
When saving, another dialog box with settings will appear. To be honest, I don't know much about them. There is a whole tutorial on SVG Profiles. I'm quite happy with SVG 1.1.
It's worth noting here that you have the option of clicking OK and saving the file, or clicking the “SVG Code...” button, which will open the TextEdit window (by at least on Mac) with SVG code.
Both options can be useful.
In Illustrator Workspace was 612px ✕ 502px.
These are the dimensions that the image on the page will have if they are not specifically specified. Its dimensions can be changed by setting the width or height attributes to img , just like PNG or JPG. Here's an example:
Browser support
One option: check support through Modernizr and replace the src for the image:
if (!Modernizr.svg) ( $(".logo img" ).attr("src" , "images/logo.png" ); )David Bushell has a very simple alternative if you don't mind JavaScript in your markup:
"this.onerror=null; this.src="image.png"">
For this method of SVG insertion, you can use the following degradation techniques:
<svg > ... svg > <div class="fallback" >div >And again we use Modernizr:
.logo-fallback ( display : none; /* Make sure the size matches the SVG size */) .no-svg .logo-fallback ( background-image : url (logo.png); )Adding SVG to the page using a tag
If for some reason you don’t like the option of inserting SVG directly into the document (it still has a couple of disadvantages, for example, caching is almost impossible), you can connect the SVG file using
<object type ="image/svg+xml" data ="kiwi.svg" class ="logo" > Kiwi Logo object >In case this is not supported, let's implement degradation using the class that Modernizr adds:
.no-svg .logo ( width : 200px ; height : 164px ; background-image : url (kiwi.png); )This approach does not cause caching problems and is supported by browsers better, than others. But if you use an external file with styles or
Using Pseudo-Classes
Using pseudo-classes such as:hover is possible in SVG, even in combination with the CSS3 transition property.
By implementing this example, hover elements carrying the example class will cause the color to change from red to blue. For this to work properly, make sure the SVG is not inserted as an Img. Better choose Embed or Iframe:
Using Img will help the SVG display properly. But, hover effects and transitions will be ignored. In addition to transition, we could use transform, thereby allowing elements to be scaled or rotated.
When using CSS3, don't forget to add vendor prefixes to maintain maximum quantity modern browsers. While Chrome and Firefox have no problem rendering flawlessly, Internet Explorer will refuse to show your creations even in the most latest version, while it is perfectly capable of showing these CSS3 properties when used in HTML.
Media queries and SVG
If you want to customize your SVG so that it can change sizes, then just use media queries directly in it:
This example ensures that elements of class example will not be shown as soon as the visible width drops below 800 pixels. Be aware that it is not the width of the document that determines this, but the width of the element carrying your SVG.
In this example, elements of the example class will not be shown, since the specified width is only 500 pixels. Media queries in SVG are also useful for optimizing graphics for printing.
Preparing SVG for use on the web is a very simple process, no more complicated than exporting JPEG or PNG. Use whatever graphics editor you're familiar with (Illustrator, Sketch, Inkscape [free], etc. [or even Photoshop if you're using shape layers]) at the image size you plan to use. I usually work in Illustrator, so I'll explain some of the ways to prepare files in that program, but they generally apply to any program. You might want to convert your text to curves, as the font will most likely render incorrectly, unless you plan to style them with the web font used on the page (which is possible!). It's also not a good idea to convert all objects into single shapes, especially if you have strokes that will need to be manipulated on the page, especially since converting objects often does not reduce file size. Any names assigned to groups or layers will be added to the SVG as an element ID. This is quite convenient for styling, but will increase the overall size file.
Before you export, you need to check that all images are in an integer pixel grid (that is, for example not 23.3px × 86.8px). Otherwise, most likely the image will not have enough clarity and part of the image will be cut off. In Illustrator this can be done as follows: Object > Artboards > Fit to Artwork Bounds. Then click save as and select SVG, and leave the default settings. There's a little optimization we can do here, but it's really not worth it since we'll be using various enhancement techniques later on, so we won't waste time on those tweaks for now.
Tricks for reducing file sizes.
(See optimization)
To achieve smallest size SVG, it would be logical to remove everything unnecessary from it. The most famous and useful program(at least I think so) for SVG processing it's SVGO. She removes all required code. But! Be careful when using this program if you plan to manipulate SVG with CSS/JS, as it may clean up the code too much, making future changes difficult. Another convenience of SVGO is that it can be included in the process of automatically building a project, but you can also use GUI if you want.
Understanding in more detail with correct removal everything unnecessary, we can do something else in graphic editor. First you need to make sure that you use as few paths/shapes as possible, as well as points on those paths. You can combine and simplify everything that can be simplified, and remove all unnecessary points. Illustrator has the VectorScribe plugin with Smart tool Remove Brush Tool, which will help you remove points and still leave general shape Same.
Preliminary optimization
Smart Remove Brush Tool removed points
Next we will enlarge the image. In Illustrator, it's convenient to turn on View > Pixel Preview with a pixel grid and check how the outlines are positioned. It will take a little time to place the outlines on the grid, but the effort will pay off and result in cleaner rendering (it's best to pay attention to this in advance).
Points off grid
Align to Grid
If there are two or more objects to align, then it is worth removing all unnecessary overlaps. Sometimes, even if the contours are carefully aligned, a thin white line may be visible. To prevent this, you can slightly overlap the objects where they overlap. Important: in SVG, the z-index has a certain order, which depends on the object located below, so it is worth placing the top object in bottom part file in the code.
And finally, last but not least, something that is usually forgotten is to enable gzip compression of SVG on your site in the .htaccess file.
AddType image/svg+xml svg svgz
As an example of how effective this technique is, I'll take the original Breaking Borders logo and optimize it this way: increase the size to what it should be; I’ll put the contours in order; I will delete as many points as possible; move the points by integer pixels; I’ll move all the overlap areas and send it all to SVGO.
Original: 1.413b
After optimization: 409b
As a result, the file size became ~71% smaller (and ~83% smaller when compressed)
SVG is the new standard for vector graphics in the browser. Vector editors such as Adobe Illustrator allow you to directly save graphics in this format, and modern browsers display SVG without problems.
Because SVG images are made up of markup, they can be created and maintained using your favorite text editor, just like you do with HTML. What's more, it's even possible to style SVG with CSS, although you'll need to become familiar with the differences between SVG styling and HTML.
SVG attributes and CSS properties
The line between HTML and CSS is clear. HTML is responsible for content and structure, CSS for display. In SVG this line is blurred, to say the least. This is the main reason that text fields and shapes are usually controlled using element attributes rather than CSS:
In this example, we draw a rectangle that is filled using the fill attribute. The color and width of the rectangle's outer border are specified by the stroke and stroke-width attributes. But you can also style the rectangle like this using CSS:
We just used attributes like CSS properties. Although, this does not work for all attributes. You cannot set the position and width and height values this way. We'll just use the y attribute, as well as width and height.
Just like in HTML, we can work with classes or identifiers of any element. Thus we would define a representation for the set SVG element ov through a styled class.
Because SVG does not differentiate between the head and body regions, style sheets and the content itself share the SVG element, which is comparable to the HTML element.
Using Pseudo-Classes
SVG allows the use of pseudo-classes such as:hover , even in conjunction with the CSS3 transition property.
Having implemented this example, we will see that when we hover over an element with the example class set for it, the fill color will change from red to blue. For this to work properly, don't embed the SVG using img tag. Better use embed or iframe:
When using the img tag, the SVG itself will display correctly. But hover effect and transitions will be ignored. In addition to the transition property, we can also use transform . In this case, the elements will be scaled or rotated.
When using CSS3, be sure to add vendor prefixes to ensure as much support as possible. more modern browsers. While Chrome and Firefox handle rendering flawlessly, Internet Explorer refuses to show your creation, although it is perfectly capable of showing those CSS3 properties if you apply them to HTML.
Media queries and SVG
If you want to customize your SVG to adapt to specific resolutions, just use media queries right inside it:
In this example, elements that have the example class specified will not be shown as soon as the visible screen width becomes less than 800 pixels. Be careful, this is not about the width of the document, but about the width of the SVG carrier element.