Styling And Animating SVGs With CSS

Styling And Animating SVGs With CSS

• By Sara Soueidan


• November 3rd, 2014


• CSSSVGTechniques


• 0 Comments

CSS can be used to character and spur scalable matrix graphics, many like it is used to character and spur HTML elements. In this article, that is a mutated twin of a speak we recently gave¹ during CSSconf EU² and From a Front³, I’ll go over a prerequisites and techniques for operative with CSS in SVG.

I’ll also go over how to trade and optimize SVGs, techniques for embedding them and how any one affects a styles and animations applied, and afterwards we’ll indeed character and spur with CSS.

Introduction

Scalable matrix graphics (SVG) is an XML-based matrix picture format for two-dimensional graphics, with support for interactivity and animation. In other words, SVGs are XML tags that describe shapes and graphics, and these shapes and graphics can be interacted with and charcterised many like HTML elements can be.

Animations and interactivity can be combined around CSS or JavaScript. In this article, we’ll concentration on CSS.

There are many reasons given SVGs are good and given we should be regulating them today:

• SVG graphics are scalable and resolution-independent. They demeanour good everywhere, from high-resolution “Retina” screens to printed media.


• SVGs have really good browser support⁴. Fallbacks for non-supporting browsers are easy to implement, too, as we’ll see after in a article.


• Because SVGs are fundamentally text, they can be Gzip’d, creation a files smaller that their bitmap counterparts (JPEG and PNG).


• SVGs are interactive and styleable with CSS and JavaScript.


• SVG comes with built-in graphics effects such as essay and masking operations, credentials mix modes, and filters. This is fundamentally a homogeneous of carrying Photoshop photo-editing capabilities right in a browser.


• SVGs are accessible. In one sense, they have a really permitted DOM API, that creates them a ideal apparatus for infographics and information visualizations and that gives them an advantage over HTML5 Canvas given a calm of a latter is not accessible. In another sense, we can check any and any component in an SVG regulating your favorite browser’s developer tools, customarily like we can check HTML elements. And SVGs are permitted to shade readers if we make them so. We’ll go over accessibility a small some-more in a final territory of this article.


• Several tools are permitted for creating, modifying and optimizing SVGs. And other collection make it easier to work with SVGs and save a lot of time in a workflows. We’ll go over some of these collection next.

Exporting SVGs From Graphics Editors And Optimizing Them

The 3 many renouned matrix graphics editors are:

1. Adobe Illustrator⁵,


2. Inkscape⁶,


3. Sketch⁷.

Adobe Illustrator is a paid focus from Adobe. It is a rarely renouned editor, with a good UI and many capabilities that make it a favorite of many designers.

Inkscape is a renouned giveaway alternative. Even nonetheless a UI is not as good as Illustrator’s, it has all we need to work with matrix graphics.

Sketch is a Mac OS X-only graphics app. It is not giveaway either, yet it has been creation a rounds⁸ among designers newly and gaining popularity⁹, with a lot of resources and tools¹⁰ being combined recently to urge a workflow.

Choose any editor to emanate your SVGs. After selecting your favorite editor and formulating an SVG yet before embedding it on a web page, we need to trade it from a editor and purify it adult to make it prepared to work with.

I’ll impute to exporting and optimizing an SVG combined in Illustrator. But a workflow relates to flattering many any editor, solely for a Illustrator-specific options we’ll go over next.

To trade an SVG from Illustrator, start by going to “File” → “Save as,” and afterwards name “.svg” from a record extensions dropdown menu. Once you’ve selected a .svg extension, a row will seem containing a set of options for exporting a SVG, such as that chronicle of SVG to use, possibly to hide images in a striking or save them outwardly and couple to them in a SVG, and how to supplement a styles to a SVG (by regulating arrangement attributes or by regulating CSS properties in a style element).

The following picture shows a best settings to name when exporting an SVG for a web:

¹¹

(View vast version¹²)

The reasons given a options above are best are explained in Michaël Chaize’s glorious essay “Export SVG for a Web With Illustrator CC¹³.”

Whichever graphics editor we choose, it will not outlay ideally purify and optimized code. SVG files, generally ones exported from editors, customarily enclose a lot of surplus information, such as meta information from a editor, comments, dull groups, default values, non-optimal values and other things that can be safely private or converted yet inspiring a digest of a SVG. And if you’re regulating an SVG that we didn’t emanate yourself, afterwards a regulation is roughly positively not optimal, so regulating a standalone optimization apparatus is advisable.

Several collection for optimizing SVG regulation are out there. Peter Collingridge’s SVG Editor¹⁴ is an online apparatus that we submit SVG regulation into possibly directly or by uploading an SVG record and that afterwards provides we with several optimization options, like stealing surplus code, comments, dull groups, white space and more. One choice allows we to discuss a series of decimal places of indicate coordinates.

¹⁵

(View vast version¹⁶)

Peter’s optimizer can also automatically pierce inline SVG properties to a character retard during a tip of a document. The good thing about it is that, when we check an option, we can see a outcome of a optimization live, that enables we to improved confirm that optimizations to make. Certain optimizations could finish adult breaking your SVG. For example, one decimal place should routinely be enough. If you’re operative with a path-heavy SVG file, shortening a series of decimal places from 4 to one could condense your file’s distance by as many as half. However, it could also wholly mangle a SVG. So, being means to preview an optimization is a vast plus.

Peter’s apparatus is an online one. If you’d cite an offline tool, try SVGO¹⁷ (the “O” is for “optimizer”), a Node.js-based apparatus that comes with a good and elementary drag-and-drop GUI¹⁸. If we don’t wish to use an online tool, this one is a good alternative.

The following screenshot (showing a trail from a picture above) is a elementary before-and-after painting of how many Peter’s apparatus optimizes SVG.

¹⁹

Notice a distance of a strange SVG compared to a optimized version. Not to mention, a optimized chronicle is many some-more readable.

After optimizing a SVG, it’s prepared to be embedded on a web page and serve customized or charcterised with CSS.

Styling SVGs With CSS

The line between HTML and CSS is clear: HTML is about calm and structure, and CSS is about a look. SVG blurs this line, to contend a least. SVG 1.1 did not need CSS to character SVG nodes — styles were practical to SVG elements regulating attributes famous as “presentation attributes.”

Presentation attributes are a shorthand for environment a CSS skill on an element. Think of them as special character properties. They even minister to a character cascade, yet we’ll get to that shortly.

The following instance shows an SVG dash that uses arrangement attributes to character a “border” (stroke) and “background color” (fill) of a star-shaped polygon:

svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px" viewBox="0 0 300 300"
 polygon
fill = "#FF931E"
stroke = "#ED1C24"
stroke-width = "5"
points = "279.1,160.8 195.2,193.3 174.4,280.8 117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/
/svg

The fill, stroke and stroke-width attributes are arrangement attributes.

In SVG, a subset of all CSS properties competence be set by SVG attributes, and clamp versa. The SVG selection lists a SVG attributes that competence be set as CSS properties²⁰. Some of these attributes are common with CSS, such as opacity and transform, among others, while some are not, such as fill, stroke and stroke-width, among others.

In SVG 2, this list will embody x, y, width, height, cx, cy and a few other arrangement attributes that were not probable to set around CSS in SVG 1.1. The new list of attributes can be found in a SVG 2 specification²¹.

Another approach to set a styles of an SVG component is to use CSS properties. Just like in HTML, styles competence be set on an component regulating inline character attributes:

svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 300px;" viewBox="0 0 300 300"
polygon
 character = "fill: stroke: stroke-width: 5;"
 points = "279.1,160.8 195.2,193.3 174.4,280.8 117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/
/svg

Styles competence also be set in sequence sets in a style tag. The style tab can be placed in a svg tag:

svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px" viewBox="0 0 300 300"
 character type="text/css"
 ![CDATA[
 selector /* styles */
 ]]
 /style
 g id=".." … /g
/svg

And it can be placed outward of it, if you’re embedding a SVG inline in a document:

!DOCTYPE html!-- HTML5 request --
html
head … /head
body
style type="text/css"
 /* character manners */
/style
!-- xmlns is discretionary in an HTML5 request →
svg viewBox="0 0 300 300"
!-- SVG calm --
/svg
/body
/html

And if we wish to totally apart character from markup, afterwards we could always couple to an outmost character piece from a SVG file, regulating a ?xml-stylesheet tag, as shown below:

?xml version="1.0" standalone="no"?
?xml-stylesheet type="text/css" href="style.css"?
svg xmlns="http://www.w3.org/2000/svg" version="1.1" width=".." height=".." viewBox=".."
 !-- SVG calm --
/svg

Style Cascades

We mentioned progressing that arrangement attributes are arrange of special character properties and that they are customarily shorthand for environment a CSS skill on an SVG node. For this reason, it customarily creates clarity that SVG arrangement attributes would minister to a character cascade.

Indeed, arrangement attributes count as low-level “author character sheets” and are overridden by any other character definitions: outmost character sheets, request character sheets and inline styles.

The following blueprint shows a sequence of styles in a cascade. Styles reduce in a blueprint overrule those above them. As we can see, arrangement charge styles are overridden by all other styles solely for those specific to a user agent.

²²

For example, in a following regulation snippet, an SVG round component has been drawn. The fill tone of a round will be low pink, that overrides a blue fill specified in a arrangement attribute.

circle cx="100" cy="100" r="75" fill="blue" style="fill:deepPink;" /

Selectors

Most CSS selectors can be used to name SVG elements. In further to a ubiquitous type, category and ID selectors, SVGs can be styled regulating CSS2’s energetic pseudo-classes²³ (:hover, :active and :focus) and pseudo-classes²⁴ (:first-child, :visited, :link and :lang. The remaining CSS2 pseudo-classes, including those carrying to do with generated content²⁵ (such as ::before and ::after), are not partial of a SVG denunciation clarification and, hence, have no outcome on a character of SVGs.

The following is a elementary animation of a fill tone of a round from low pinkish to immature when it is hovered over regulating a tab selector and a :hover pseudo-class:

style
circle 
 fill: deepPink;
 transition: fill .3s ease-out;


circle:hover 
 fill: 

/style

Much some-more considerable effects can be created. A elementary nonetheless really good outcome comes from a Iconic²⁶ icons set, in that a light tuber is illuminated adult when hovered over. A demo of a effect²⁷ is available.

Notes

Because arrangement attributes are voiced as XML attributes, they are case-sensitive. For example, when naming a fill tone of an element, a charge contingency be created as fill="…" and not fill="…".

Furthermore, keyword values for these attributes, such as a italic in font-style="italic", are also case-sensitive and contingency be specified regulating a accurate box tangible in a selection that defines that value.

All other styles specified as CSS properties — possibly in a character charge or a style tab or in an outmost character piece — are theme to a abbreviation manners specified in a CSS specifications, that are generally reduction case-sensitive. That being said, a SVG “Styling”²⁸ selection recommends regulating a accurate skill names (usually, lowercase letters and hyphens) as tangible in a CSS specifications and expressing all keywords in a same case, as compulsory by arrangement attributes, and not holding advantage of CSS’s ability to omit case.

Animating SVGs With CSS

SVGs can be charcterised a same approach that HTML elements can, regulating CSS keyframes and animation properties or regulating CSS transitions.

In many cases, formidable animations will customarily enclose some kind of mutation — a translation, a rotation, scaling and/or skewing.

In many respects, SVG elements respond to transform and transform-origin in a same approach that HTML elements do. However, a few unavoidable differences outcome from a fact that, distinct HTML elements, SVG elements aren’t governed by a box indication and, hence, have no margin, border, stuffing or calm boxes.

By default, a renovate start of an HTML component is during (50%, 50%), that is a element’s center. By contrast, an SVG element’s renovate start is positioned during a start of a user’s stream coordinate system, that is a (0, 0) point, in a top-left dilemma of a canvas.

Suppose we have an HTML div and an SVG rect element:

!DOCTYPE html
…
div style="width: 100px; height: 100px; background-color: orange" /div
svg style="width: 150px; height: 150px; background-color: #eee"
 rect width="100" height="100" x="25" y="25" fill="orange" /
/svg

If were were to stagger both of them by 45 degrees, yet changing a default renovate origin, we would get a following outcome (the red round indicates a position of a renovate origin):

²⁹

(View vast version³⁰)

What if we wanted to stagger a SVG component around a possess center, rather than a top-left dilemma of a SVG canvas? We would need to categorically set a renovate start regulating a transform-origin property.

Setting a renovate start on an HTML component is straightforward: Any value we discuss will be set relations to a element’s limit box.

In SVG, a renovate start can be set regulating possibly a commission value or an comprehensive value (for example, pixels). If we discuss a transform-origin value in percentages, afterwards a value will be set relations to a element’s bounding box, that includes a cadence used to pull a border. If we discuss a renovate start in comprehensive values, afterwards it will be set relations to a SVG canvas’ stream coordinate complement of a user.

If we were to set a renovate start of a div and rect from a prior instance to a core regulating commission values, we would do this:

!DOCTYPE html
style
 div, rect 
 transform-origin: 50% 50%;

/style

The ensuing mutation would demeanour like so:

³¹

(View vast version³²)

That being said, during a time of writing, environment a renovate start in commission values now does not work in Firefox. This is a famous bug³³. So, for a time being, your best gamble is to use comprehensive values so that a transformations act as expected. You can still use commission values for WebKit browsers, though.

In a following example, we have a pinwheel on a hang that we’ll stagger regulating CSS animation. To have a circle stagger around a possess center, we’ll set a renovate start in pixels and percentages:

svg
style
.wheel 
 transform-origin: 193px 164px;
 -webkit-transform-origin: 50% 50%;
 -webkit-animation: stagger 4s cubic-bezier(.49,.05,.32,1.04) gigantic alternate;
 animation: stagger 4s cubic-bezier(.49,.05,.32,1.04) gigantic alternate;


@-webkit-keyframes stagger 
 50% 
 -webkit-transform: rotate(360deg);
 


@keyframes stagger 
 50% 
 transform: rotate(360deg);
 


/style
!-- SVG calm --
/svg

You can check out a live outcome on Codepen³⁴. Note that, during a time of writing, CSS 3D transformations are not hardware-accelerated when used on SVG elements; they have a same opening form as SVG renovate attributes. However, Firefox does accelerate transforms on SVGs to some extent.

Animating SVG Paths

There is no approach to spur an SVG trail from one figure to another in CSS. If we wish to morph paths — that is, spur from one trail to another — afterwards we will need to use JavaScript for a time being. If we do that, we suggest regulating Snap.svg³⁵ by Dmitry Baranovskiy, a same chairman behind a SVG library Raphaël³⁶.

Snap.svg is described as being to SVG what jQuery is to HTML, and it creates traffic with SVGs and a quirks a lot easier.

That being said, we could emanate an charcterised line-drawing outcome regulating CSS. The animation would need we to know a sum length of a trail you’re animating and afterwards to use a stroke-dashoffset and stroke-dasharray SVG properties to grasp a sketch effect. Once we know a length of a path, we can spur it with CSS regulating a following rules:

#path 
stroke-dasharray: pathLength;
stroke-dashoffset: pathLength;
/* transition stroke-dashoffset */
transition: stroke-dashoffset 2s linear;


svg:hover #path
 stroke-dashoffset: 0;

In a instance above, a trail is drawn over a march of dual seconds when a SVG is hovered over.

In a subsequent demo, we’ll use a same technique and afterwards use a CSS transition — with a check — to light adult a tuber once a path’s animation ends.

#cable 
 stroke: 
 stroke-dasharray: 4000 4000; 
 stroke-dashoffset: 4000;
 stroke-width: 4;
 transition: stroke-dashoffset 8s linear;


svg:hover #cable 
 stroke-dashoffset: 0;


/* spin flare on */
.inner-lamp
 fill:grey;
 transition: fill .5s ease-in 6s;


svg:hover .inner-lamp 
 fill: 

/* … */

You can perspective a live demo on JS Bin³⁷. Note that we can also write stroke-dasharray: 4000; instead of stroke-dasharray: 4000 — if a dual line and opening values are equal, afterwards we can discuss customarily one value to be practical to both.

Sometimes, we competence not know a accurate length of a trail to animate. In this case, we can use JavaScript to collect a length of a trail regulating a getTotalLength() method:

var trail = document.querySelector('.drawing-path');
path.getTotalLength();
//set CSS properties up
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
//set transition up
path.style.transition = 'stroke-dashoffset 2s ease-in-out';
// animate
path.style.strokeDashoffset = '0';

The dash above is a really simplified instance arrangement that we can do a same thing we did with CSS yet regulating JavaScript.

Jake Archibald has created an glorious essay explaining a technique³⁸ in some-more detail. Jake includes a good interactive demo that creates it easy to see accurately what’s going on in a animation and how a dual SVG properties work together to grasp a preferred effect. we suggest reading his essay if you’re meddlesome in training some-more about this technique.

Embedding SVGs

An SVG can be embedded in a request in 6 ways, any of that has a possess pros and cons.

The reason we’re covering embedding techniques is given a approach we hide an SVG will establish possibly certain CSS styles, animations and interactions will work once a SVG is embedded.

An SVG can be embedded in any of a following ways:

1. as an picture regulating a img tag:
   img src="mySVG.svg" alt="" /


2. as a credentials picture in CSS:
   .el background-image: url(mySVG.svg);


3. as an intent regulating a intent tag:
   object type="image/svg+xml" data="mySVG.svg"!-- fallback here --/object


4. as an iframe regulating an iframe tag:
   iframe src="mySVG.svg"!-- fallback here →/iframe


5. using a hide tag:
   embed type="image/svg+xml" src="mySVG.svg" /


6. inline regulating a svg tag:
   svg version="1.1" xmlns="http://www.w3.org/2000/svg" …
!-- svg calm →
/svg

The object tab is a primary approach to embody an outmost SVG file. The categorical advantage of this tab is that there is a customary apparatus for providing an picture (or text) fallback in box a SVG does not render. If a SVG can't be displayed for any reason — such as given a supposing URI is wrong — afterwards a browser will arrangement a calm between a opening and shutting object tags.

object type="image/svg+xml" data="mySVG.svg"
 img src="fallback-image.png" alt="…" /
/object

If we intend regulating any modernized SVG features, such as CSS or scripting, a afterwards HTML5 object tab is your best bet.

Because browsers can describe SVG papers in their possess right, embedding and displaying an SVG regulating an iframe is possible. This competence be a good process if we wish to totally apart a SVG regulation and book from your categorical page. However, utilizing an SVG picture from your categorical page’s JavaScript becomes a small some-more formidable and will be theme to a same-origin policy³⁹.

The iframe tag, customarily like a object tag, comes with a default approach to yield a fallback for browsers that don’t support SVG, or those that do support it yet can’t describe it for whatever reason.

iframe src="mySVG.svg"
 img src="fallback-image.png" alt="…" /
/iframe

The embed tab was never a partial of any HTML specification, yet it is still widely supported. It is dictated for including calm that needs an outmost plugin to work. The Adobe Flash plugin requires a embed tag, and ancillary this tab is a customarily genuine reason for a use with SVG. The embed tab does not come with a default fallback mechanism.

An SVG can also be embedded in a request inline — as a “code island” — regulating a svg tag. This is one of a many renouned ways to hide SVGs today. Working with inline SVG and CSS is a lot easier given a SVG can be styled and charcterised by targeting it with character manners placed anywhere in a document. That is, a styles don’t need to be enclosed between a opening and shutting svg tags to work; given this condition is required for a other techniques.

Embedding SVGs inline is a good choice, as prolonged as you’re peaceful to supplement to a distance of a page and give adult retrograde harmony (since it does not come with a default fallback apparatus either). Also, note that an inline SVG can't be cached.

An SVG embedded with an img tab and one embedded as a CSS credentials picture are treated in a identical approach when it comes to CSS styling and animation. Styles and animations practical to an SVG regulating an outmost CSS apparatus will not be recorded once a SVG is embedded.

The following list shows possibly CSS animations and interactions (such as float effects) are recorded when an SVG is embedded regulating one of a 6 embedding techniques, as compared to SVG SMIL animations⁴⁰. The final mainstay shows that, in all cases, SVG animations (SMIL) are preserved.

The function indicated in a list above is a customary behavior. However, implementations competence differ between browsers, and bugs competence exist.

Note that, even nonetheless SMIL animations will be preserved, SMIL interactions will not work for an SVG embedded as an picture (i.e. img or around CSS).

Making SVGs Responsive

After embedding an SVG, we need to make certain it is responsive.

Depending on a embedding technique we choose, we competence need to request certain hacks and fixes to get your SVG to be cross-browser responsive. The reason for this is that a approach browsers establish a measure of an SVG differs for some embedding techniques, and SVG implementations among browsers also differ. Therefore, a approach SVG is rubbed is opposite and requires some character tweaking to make it act consistently opposite all browsers.

I won’t get into sum of browser inconsistencies, for a consequence of brevity. we will customarily cover a repair or penetrate indispensable for any embedding technique to make a SVG manageable in all browsers for that technique. For a minute demeanour during a inconsistencies and bugs, check out my essay on Codrops⁴⁴⁴¹.

Whichever technique we choose, a initial thing you’ll need to do is mislay a height and width attributes from a base svg element.

You will need to safety a viewBox charge and set a preserveAspectRatio charge to xMidYMid meet — if it isn’t already set to that value. Note that we competence not need to categorically set preserveAspectRatio to xMidYMid meet during all given it will default to this value anyway if we don’t change it.

When an SVG is embedded as a CSS credentials image, no additional fixes or hacks are needed. It will act customarily like any other bitmap credentials picture and will respond to CSS’ background-image properties as expected.

An SVG embedded regulating an img tab will automatically be stretched to a breadth of a enclosure in all browsers (once a breadth has been private from a svg, of course). It will afterwards scale as approaching and be liquid in all browsers solely for Internet Explorer (IE). IE will set a tallness of a SVG to 150 pixels, preventing it from scaling correctly. To repair this, we will need to categorically set a breadth to 100% on a img.

img src="mySVG.svg" alt="SVG Description." /
img 
 width: 100%;

The same goes for an SVG embedded regulating an object tag. For a same reason, we will also need to set a breadth of a object to 100%:

object 
 width: 100%;

Even nonetheless iframe has a lot in common with object, browsers seem to hoop it differently. For it, all browsers will default to a default distance for transposed elements in CSS⁴², that is 300 by 150 pixels.

The customarily approach to make an iframe manageable while progressing a aspect ratio of a SVG is by regulating a “padding hack” pioneered by Thierry Koblentz on A List Apart⁴³. The thought behind a stuffing penetrate is to make use of a attribute of an element’s stuffing to a breadth in sequence to emanate an component with an unique ratio of tallness to width.

When an element’s stuffing is set in percentages, a commission is distributed relations to a breadth of a element, even when we set a tip or bottom stuffing of a element.

To request a stuffing penetrate and make a SVG responsive, a SVG needs to be wrapped in a container, and afterwards you’ll need to request some styles to a enclosure and a SVG (i.e. a iframe), as follows:

!-- hang svg in a enclosure --
div class="container"
 iframe src="my_SVG_file.svg"
 !-- fallback here --
 /iframe
/div

.container 
 /* fall a container's tallness */
 height: 0; 

 /* discuss any breadth we wish (a commission value, basically) */ 
 width: width-value; 

 /* request stuffing regulating a following regulation */
 /* this regulation creates certain a aspect ratio of a enclosure equals that of a SVG striking */
 padding-top: (svg-height / svg-width) * width-value;
 position: relative; /* emanate positioning context for SVG */

The svg-height and svg-width variables are a values of a tallness and breadth of a svg, respectively — a measure that we private earlier. And a width-value is any breadth we wish to give a SVG enclosure on a page.

Finally, a SVG itself (the iframe) needs to be positioned positively inside a container:

iframe 
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;

We position a iframe positively given collapsing a container’s tallness and afterwards requesting a stuffing to it would pull a iframe over a bounds of a container. So, to “pull it behind up,” we position it absolutely. You can review some-more about a sum in my essay on Codrops⁴⁴⁴¹.

Finally, an SVG embedded inline in an svg tab becomes manageable when a tallness and breadth are removed, given browsers will assume a breadth of 100% and will scale a SVG accordingly. However, IE has a same 150-pixel fixed-height emanate for a img tab mentioned earlier; unfortunately, environment a breadth of a SVG to 100% is not sufficient to repair it this time.

To make a inline SVG liquid in IE, we also need to request a stuffing penetrate to it. So, we hang svg in a container, request a padding-hack manners mentioned above to a enclosure and, finally, position a svg positively inside it. The customarily disproportion here is that we do not need to categorically set a tallness and breadth of svg after positioning it.

svg 
 position: absolute;
 top: 0;
 left: 0;

Using CSS Media Queries

SVG accepts and responds to CSS media queries as well. You can use media queries to change a styles of an SVG during opposite viewport sizes.

However, one critical note here is that a viewport that a SVG responds to is a viewport of a SVG itself, not a page’s viewport!

This is really identical in judgment to component queries⁴⁵.

An SVG embedded with an img, object or iframe will respond to a viewport determined by these elements. That is, a measure of these elements will form a viewport inside of that a SVG is to be drawn and, hence, will form a viewport to that a CSS media-query conditions will be applied.

The following instance includes a set of media queries inside an SVG that is afterwards referenced regulating an img tag:

svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 194 186"
 style
 @media all and (max-width: 50em) 
 /* name SVG elements and character them */
 
 @media all and (max-width: 30em) 
 /* styles */
 
 /style
 !-- SVG elements here --
/svg

When a SVG is referenced, it will get a styles specified in a media queries above when a img has a max-width of 50em or 30em, respectively.

img src="my-logo.svg" alt="Page Logo." /

You can learn some-more about media queries inside SVGs in Andreas Bovens’s essay for Dev.Opera⁴⁶.

Final Words

SVGs are images, and customarily as images can be accessible, so can SVGs. And creation certain your SVGs are permitted is important, too.

I can’t stress this enough: Make your SVGs accessible. You can do several things to make that happen. For a finish and glorious guide, we suggest Leonie Watson’s glorious essay on SitePoint⁴⁷. Her tips embody regulating a title and desc tags in a svg, regulating ARIA attributes and many more.

In further to accessibility, don’t forget to optimize your SVGs and yield fallbacks for non-supporting browsers. we suggest Todd Parker’s presentation⁴⁸.

Last yet not least, we can always check support for opposite SVG facilities on Can we Use⁴⁹. we wish you’ve found this essay to be useful. Thank we for reading.

(vf, al, il)

Footnotes

1. 1 https://www.youtube.com/watch?v=lf7L8X6ZBu8


2. 2 http://2014.cssconf.eu/


3. 3 http://2014.fromthefront.it/


4. 4 http://caniuse.com/#feat=svg


5. 5 //www.adobe.com/mena_en/products/illustrator.html


6. 6 https://inkscape.org/en/


7. 7 http://bohemiancoding.com/sketch/


8. 8 https://medium.com/@jm_denis/discovering-sketch-25545f6cb161


9. 9 http://hackingui.com/design/sketch-design/why-i-moved-to-sketch/


10. 10 http://www.sketchappsources.com/


11. 11 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-Ai-options-large-preview-opt.png


12. 12 http://www.smashingmagazine.com/wp-content/uploads/2014/10/01-Ai-options-large-preview-opt.png


13. 13 http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/


14. 14 http://petercollingridge.appspot.com/svg-editor


15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-svg-editor-large-preview-opt.png


16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/10/02-svg-editor-large-preview-opt.png


17. 17 https://github.com/svg/svgo


18. 18 https://github.com/svg/svgo-gui


19. 19 http://gridtips.com/wp-content/plugins/RSSPoster_PRO/cache/2c620_03-optimized-path-opt.jpg


20. 20 http://www.w3.org/TR/SVG/propidx.html


21. 21 http://www.w3.org/TR/SVG2/styling.html#SVGStylingProperties


22. 22 http://gridtips.com/wp-content/plugins/RSSPoster_PRO/cache/16e52_04-diagram-opt.jpg


23. 23 http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html#dynamic-pseudo-classes


24. 24 http://www.w3.org/TR/2008/REC-CSS2-20080411/selector.html#q15


25. 25 http://www.w3.org/TR/2008/REC-CSS2-20080411/generate.html


26. 26 https://useiconic.com/


27. 27 http://tutsplus.github.io/Styling-Iconic/styling/index.html


28. 28 http://www.w3.org/TR/SVG11/styling.html#StylingWithCSS


29. 29 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-transform-svg-html-large-preview-opt.png


30. 30 http://www.smashingmagazine.com/wp-content/uploads/2014/10/05-transform-svg-html-large-preview-opt.png


31. 31 http://www.smashingmagazine.com/wp-content/uploads/2014/10/06-transform-svg-html-large-preview-opt.png


32. 32 http://www.smashingmagazine.com/wp-content/uploads/2014/10/06-transform-svg-html-large-preview-opt.png


33. 33 https://bugzilla.mozilla.org/show_bug.cgi?id=891074


34. 34 http://codepen.io/SaraSoueidan/pen/d0f94390e6c9af38fa562974399b6222?editors=100


35. 35 http://snapsvg.io/


36. 36 http://raphaeljs.com/


37. 37 http://jsbin.com/haxaqa/1/edit?html,output


38. 38 http://jakearchibald.com/2013/animated-line-drawing-svg/


39. 39 http://en.wikipedia.org/wiki/Same-origin_policy


40. 40 http://css-tricks.com/guide-svg-animations-smil/


41. 41 http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/


42. 42 http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width


43. 43 http://alistapart.com/article/creating-intrinsic-ratios-for-video/


44. 44 http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/


45. 45 http://responsiveimagescg.github.io/eq-usecases/


46. 46 https://dev.opera.com/blog/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizes/


47. 47 http://www.sitepoint.com/tips-accessible-svg/


48. 48 https://docs.google.com/presentation/d/1CNQLbqC0krocy_fZrM5fZ-YmQ2JgEADRh3qR6RbOOGk/pub?start=trueloop=falsedelayms=5000#slide=id.p


49. 49 http://caniuse.com/#search=svg

↑ Back to topShare on Twitter

Styling And Animating SVGs With CSS