CINXE.COM

<!doctype html> <html lang="en" id="top-of-site" class="js"> <head> <title>Using SVG | CSS-Tricks</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/manifest.webmanifest"> <meta name="theme-color" content="#ff7a18"> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="CSS-Tricks Search"> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="https://css-tricks.com/feed/"> <link rel="preconnect" href="https://s3.buysellads.com"> <link rel="dns-prefetch" href="https://s3.buysellads.com"> <link rel="preconnect" href="https://srv.buysellads.com"> <link rel="dns-prefetch" href="https://srv.buysellads.com"> <link rel="preconnect" href="https://static.codepen.io"> <link rel="dns-prefetch" href="https://static.codepen.io"> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>  <meta name="description" content="SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG"/> <meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/> <link rel="canonical" href="https://css-tricks.com/using-svg/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Using SVG | CSS-Tricks" /> <meta property="og:description" content="SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG" /> <meta property="og:url" content="https://css-tricks.com/using-svg/" /> <meta property="og:site_name" content="CSS-Tricks" /> <meta property="article:publisher" content="https://www.facebook.com/CSSTricks" /> <meta property="article:tag" content="SVG" /> <meta property="article:tag" content="svg filters" /> <meta property="article:tag" content="svg icons" /> <meta property="article:section" content="Articles" /> <meta property="og:updated_time" content="2019-05-02T13:31:54-06:00" /> <meta property="og:image" content="//css-tricks.com/wp-content/uploads/2013/03/kiwi.png" /> <meta property="og:image:alt" content="Using SVG" /> <meta property="article:published_time" content="2013-03-05T15:58:55-07:00" /> <meta property="article:modified_time" content="2019-05-02T13:31:54-06:00" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Using SVG | CSS-Tricks" /> <meta name="twitter:description" content="SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG" /> <meta name="twitter:site" content="@CSS" /> <meta name="twitter:creator" content="@chriscoyier" /> <meta name="twitter:image" content="//css-tricks.com/wp-content/uploads/2013/03/kiwi.png" /> <meta name="twitter:label1" content="Written by" /> <meta name="twitter:data1" content="Chris Coyier" /> <meta name="twitter:label2" content="Time to read" /> <meta name="twitter:data2" content="10 minutes" /> <script data-jetpack-boost="ignore" type="application/ld+json" class="rank-math-schema-pro">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://css-tricks.com/#organization","name":"CSS-Tricks","sameAs":["https://www.facebook.com/CSSTricks","https://twitter.com/CSS"],"logo":{"@type":"ImageObject","@id":"https://css-tricks.com/#logo","url":"https://css-tricks.com/wp-content/uploads/2019/06/akqRGyta_400x400.jpg","contentUrl":"https://css-tricks.com/wp-content/uploads/2019/06/akqRGyta_400x400.jpg","caption":"CSS-Tricks","inLanguage":"en-US"}},{"@type":"WebSite","@id":"https://css-tricks.com/#website","url":"https://css-tricks.com","name":"CSS-Tricks","publisher":{"@id":"https://css-tricks.com/#organization"},"inLanguage":"en-US"},{"@type":"ImageObject","@id":"//css-tricks.com/wp-content/uploads/2013/03/kiwi.png","url":"//css-tricks.com/wp-content/uploads/2013/03/kiwi.png","width":"200","height":"200","inLanguage":"en-US"},{"@type":"WebPage","@id":"https://css-tricks.com/using-svg/#webpage","url":"https://css-tricks.com/using-svg/","name":"Using SVG | CSS-Tricks","datePublished":"2013-03-05T15:58:55-07:00","dateModified":"2019-05-02T13:31:54-06:00","isPartOf":{"@id":"https://css-tricks.com/#website"},"primaryImageOfPage":{"@id":"//css-tricks.com/wp-content/uploads/2013/03/kiwi.png"},"inLanguage":"en-US"},{"@type":"Person","@id":"https://css-tricks.com/author/chriscoyier/","name":"Chris Coyier","url":"https://css-tricks.com/author/chriscoyier/","image":{"@type":"ImageObject","@id":"https://secure.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=96&d=retro&r=pg","url":"https://secure.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=96&d=retro&r=pg","caption":"Chris Coyier","inLanguage":"en-US"},"sameAs":["http://chriscoyier.net","https://twitter.com/chriscoyier"],"worksFor":{"@id":"https://css-tricks.com/#organization"}},{"@type":"BlogPosting","headline":"Using SVG | CSS-Tricks","datePublished":"2013-03-05T15:58:55-07:00","dateModified":"2019-05-02T13:31:54-06:00","author":{"@id":"https://css-tricks.com/author/chriscoyier/","name":"Chris Coyier"},"publisher":{"@id":"https://css-tricks.com/#organization"},"description":"SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG","name":"Using SVG | CSS-Tricks","@id":"https://css-tricks.com/using-svg/#richSnippet","isPartOf":{"@id":"https://css-tricks.com/using-svg/#webpage"},"image":{"@id":"//css-tricks.com/wp-content/uploads/2013/03/kiwi.png"},"inLanguage":"en-US","mainEntityOfPage":{"@id":"https://css-tricks.com/using-svg/#webpage"}}]}</script>  <link rel='dns-prefetch' href='//stats.wp.com' /> <link rel='dns-prefetch' href='//i0.wp.com' /> <link rel='dns-prefetch' href='//c0.wp.com' /> <link rel='dns-prefetch' href='//widgets.wp.com' /> <link rel="alternate" type="application/rss+xml" title="CSS-Tricks » Using SVG Comments Feed" href="https://css-tricks.com/using-svg/feed/" /> <link rel='stylesheet' id='css-tricks-style-css' href='https://css-tricks.com/wp-content/themes/CSS-Tricks-19/style.css?ver=cache_bust=1732117801409' type='text/css' media='all' /> <style id='acf-post-slider-style-inline-css' type='text/css'> .post-slider { box-sizing: content-box; display: flex; margin: 0 0 var(--gap) 0; padding: 0 1rem 1rem; position: relative; @media (min-width: 1200px) { &::after { content: ""; position: absolute; right: 0; top: 0; bottom: 3.6rem; width: 5px; height: 100%; border-radius: 5px; box-shadow: -10px 0 20px 3px #000; background: linear-gradient( 130deg, #ff7a18 0%, #af002d 41.07%, #319197 76.05% ); } body.home & { background: none; } } @media (max-width: 1200px) { scrollbar-color: #666 #201c29; &::-webkit-scrollbar { width: 10px; height: 10px; } &::-webkit-scrollbar-thumb { background: #434343; border-radius: 10px; box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25), inset -2px -2px 2px rgba(0, 0, 0, 0.25); } &::-webkit-scrollbar-track { background: linear-gradient( to right, #434343, #434343 1px, #262626 1px, #262626 ); } padding-bottom: var(--gap); padding-left: 5px; overflow-x: scroll; -webkit-overflow-scrolling: touch; scroll-snap-points-x: repeat(250px); scroll-snap-type: x mandatory; -webkit-scroll-snap-type: x mandatory; .mini-card { scroll-snap-align: start; } } } .post-slider-header { color: #fff; margin-top: 2rem; flex: 0 0 250px; margin-right: 1rem; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; @media (max-width: 1200px) { scroll-snap-align: start; scroll-margin-inline-start: 5px; } p { font-size: var(--font-size-body); margin: 0; } a { text-decoration: none; } &::before { --offset: 5px; content: ""; background: linear-gradient( 130deg, #ff7a18 0%, #af002d 41.07%, #319197 76.05% ); position: absolute; top: calc(var(--offset) * -1); left: calc(var(--offset) * -1); width: calc(100% + 10px); height: calc(100% + 10px); z-index: 1; border-radius: 12px; } &::after { content: ""; position: absolute; top: 0; left: 0; width: calc(100%); height: calc(100%); background: #000; z-index: 2; border-radius: 8px; } transform: translateY(-10px); > * { color: inherit; position: relative; z-index: 3; } @media (max-width: 800px) { flex: 0 0 175px; } } .mini-card-grid { display: flex; gap: 1rem; margin: 0 0 1.5rem 0; position: relative; scrollbar-gutter: always; padding: 3rem 0 3rem 2rem; margin: 0; overflow-x: scroll; -webkit-overflow-scrolling: touch; scrollbar-color: #666666 #201c29; &::-webkit-scrollbar { width: 10px; height: 10px; } &::-webkit-scrollbar-thumb { background: #434343; border-radius: 10px; box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25), inset -2px -2px 2px rgba(0, 0, 0, 0.25); } &::-webkit-scrollbar-track { background: linear-gradient( to right, #434343, #434343 1px, #262626 1px, #262626 ); } @media (max-width: 1200px) { overflow-x: visible; } } .mini-card { padding: 1.5rem; border-radius: 16px; background: linear-gradient(85deg, #434343, #262626); color: #fff; display: flex; flex-direction: column; transition: 0.2s; margin: 0; min-width: 300px; min-height: 350px; box-shadow: -2rem 0 3rem -2rem black; a { text-decoration: none; } h3 a { color: white !important; } h3 .aal_anchor { display: none; } .tags { margin: 0 0 0.5rem 0; } .author-name { color: #fff; } time { display: block; margin: 0 0 0.25rem 0; color: #777; strong { color: #d4d4d4; } } &:hover, &:focus-within { transform: translate(0, -1rem) rotate(3deg); & ~ .mini-card { transform: translateX(130px); } } &:first-child { &:hover, &:focus-within { /* Cover clickable area on the left edge of first card */ transform: translate(-0.5rem, -1rem) rotate(3deg); } } &:not(:first-child) { margin-left: -130px; box-shadow: -3rem 0 3rem -2rem black; } @media (max-width: 1200px) { min-width: 220px; &:not(:first-child) { margin-left: -30px; } &:hover { transform: translate(0, -1rem); & ~ .mini-card { transform: translateX(30px); } } } @media (max-width: 800px) { min-width: 190px; &:not(:first-child) { margin-left: -10px; } &:hover { transform: translate(0, -1rem); & ~ .mini-card { transform: translateX(10px); } } } } .mini-card-title { font-size: 1.3rem; margin: 0 0 1rem 0; } </style> <style id='css-tricks-baseline-status-style-inline-css' type='text/css'> /*!***************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***! \***************************************************************************************************************************************************************************************************************************************/ /** * The following styles get applied both on the front of your site * and in the editor. * * Replace them with your own styles or remove the file completely. */ baseline-status { --color-text: #fff; --color-outline: var(--orange); background: #000; border: solid 5px var(--color-outline); border-radius: 8px; color: var(--color-text); display: block; margin-block-end: var(--gap); padding: calc(var(--gap) / 4); } @media (prefers-color-scheme: dark) { baseline-status { --color-text: #fff; --color-link: var(--orange); } } baseline-status::slotted(h1) { display: none; } /*# sourceMappingURL=style-index.css.map*/ </style> <style id='css-tricks-feedbin-starred-feed-style-inline-css' type='text/css'> /*!***************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***! \***************************************************************************************************************************************************************************************************************************************/ /** * The following styles get applied both on the front of your site * and in the editor. */ .wp-block-css-tricks-feedbin-starred-feed { container: feedbin/inline-size; display: grid; gap: 0; } .wp-block-css-tricks-feedbin-starred-feed .article-grid { gap: 0; grid-template-columns: 1fr; } .wp-block-css-tricks-feedbin-starred-feed .starred-item { margin-block-end: 1rem; } .wp-block-css-tricks-feedbin-starred-feed .starred-item :is(h3, #specificity) { font-family: "Blanco", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", system-serif; font-size: 1.35rem; line-height: 1.35; margin-block: calc(var(--gap) / 4); margin-top: 0; padding-block-end: calc(var(--gap) / 4); } .wp-block-css-tricks-feedbin-starred-feed .starred-item :is(h3, #specificity) a { color: var(--blue) !important; } .wp-block-css-tricks-feedbin-starred-feed .starred-item :is(h3, #specificity) a:is(:hover, :focus, #specificity) { -webkit-text-decoration: 1px solid var(--blue); text-decoration: 1px solid var(--blue); } .wp-block-css-tricks-feedbin-starred-feed .starred-item cite { flex: 0 1 300px; font-style: oblique; line-clamp: 1; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; } .wp-block-css-tricks-feedbin-starred-feed .starred-item span { line-clamp: 1; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; } .starred-item { border-radius: 12px; display: grid; gap: 1rem; grid-template-columns: 1fr; } @container feedbin (width >= 600px) { .starred-item { grid-template-columns: 40% 60%; } } .starred-item .article-article { background-color: #262626; background-position: top 0 center; background-repeat: no-repeat; background-image: radial-gradient(50% 50% at top center, rgba(0, 0, 0, 0.66), #262626), linear-gradient(180deg, #000, #262626); background-size: 120% 2000px, 100% 2000px; border-radius: 12px 0 0 12px; color: #fff; gap: 1rem; padding: 1.5rem; } .starred-item .article-article h2 a { color: #fff; } .starred-item .article-article span:has(strong) { font-size: 1rem; } .starred-item .article-summary { padding: var(--gap); } .starred-item .article-summary :is(h2, h3, h4) { color: #262626; } .starred-item .article-summary p { margin-block-end: calc(var(--gap) / 4); } .starred-item .article-summary hr, .starred-item .article-summary figure { display: none; } @container article-grid (width <= 600px) { .starred-item .article-summary { display: none; } } @keyframes shadow-reveal { 0% { opacity: 0; } 100% { opacity: 1; } } /*# sourceMappingURL=style-index.css.map*/ </style> <link rel='stylesheet' id='mediaelement-css' href='https://c0.wp.com/c/6.7.1/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css' type='text/css' media='all' /> <link rel='stylesheet' id='wp-mediaelement-css' href='https://c0.wp.com/c/6.7.1/wp-includes/js/mediaelement/wp-mediaelement.min.css' type='text/css' media='all' /> <style id='jetpack-sharing-buttons-style-inline-css' type='text/css'> .jetpack-sharing-buttons__services-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;list-style-type:none;margin:5px;padding:0}.jetpack-sharing-buttons__services-list.has-small-icon-size{font-size:12px}.jetpack-sharing-buttons__services-list.has-normal-icon-size{font-size:16px}.jetpack-sharing-buttons__services-list.has-large-icon-size{font-size:24px}.jetpack-sharing-buttons__services-list.has-huge-icon-size{font-size:36px}@media print{.jetpack-sharing-buttons__services-list{display:none!important}}.editor-styles-wrapper .wp-block-jetpack-sharing-buttons{gap:0;padding-inline-start:0}ul.jetpack-sharing-buttons__services-list.has-background{padding:1.25em 2.375em} </style> <style id='rank-math-toc-block-style-inline-css' type='text/css'> .wp-block-rank-math-toc-block nav ol{counter-reset:item}.wp-block-rank-math-toc-block nav ol li{display:block}.wp-block-rank-math-toc-block nav ol li:before{content:counters(item, ".") ". ";counter-increment:item} </style> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel="https://api.w.org/" href="https://css-tricks.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://css-tricks.com/wp-json/wp/v2/posts/20319" /><link rel='shortlink' href='https://css-tricks.com/?p=20319' /> <link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://css-tricks.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fcss-tricks.com%2Fusing-svg%2F" /> <link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://css-tricks.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fcss-tricks.com%2Fusing-svg%2F&format=xml" />  <style>img#wpstats{display:none}</style> <link rel="icon" href="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=32%2C32&ssl=1" sizes="32x32" /> <link rel="icon" href="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&ssl=1" sizes="192x192" /> <link rel="apple-touch-icon" href="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&ssl=1" /> <meta name="msapplication-TileImage" content="https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=180%2C180&ssl=1" /> </head> <body class="post-template-default single single-post postid-20319 single-format-standard category-articles"> <div id="top-of-site-pixel-anchor"></div> <header class="site-header" id="site-header"> <a id="skip-nav" class="skip-nav screen-reader-text" href="#maincontent">Skip to main content</a> <div class="logo"> <a href="/"> <div class="screen-reader-text">CSS-Tricks</div> <svg class="icon-logo-star" width="35px" height="35px" viewBox="0 0 362.62 388.52" data-spin-me="false"> <path d="M156.58,239l-88.3,64.75c-10.59,7.06-18.84,11.77-29.43,11.77-21.19,0-38.85-18.84-38.85-40C0,257.83,14.13,244.88,27.08,239l103.6-44.74L27.08,148.34C13,142.46,0,129.51,0,111.85,0,90.66,18.84,73,40,73c10.6,0,17.66,3.53,28.25,11.77l88.3,64.75L144.81,44.74C141.28,20,157.76,0,181.31,0s40,18.84,36.5,43.56L206,149.52l88.3-64.75C304.93,76.53,313.17,73,323.77,73a39.2,39.2,0,0,1,38.85,38.85c0,18.84-12.95,30.61-27.08,36.5L231.93,194.26,335.54,239c14.13,5.88,27.08,18.83,27.08,37.67,0,21.19-18.84,38.85-40,38.85-9.42,0-17.66-4.71-28.26-11.77L206,239l11.77,104.78c3.53,24.72-12.95,44.74-36.5,44.74s-40-18.84-36.5-43.56Z" /> </svg> <svg width="322" height="32" viewBox="0 0 322 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-logo-text"> <path d="M16.4923 21.5221C16.0962 21.5202 15.7132 21.6668 15.4167 21.9339C13.9468 23.1946 12.5055 23.8978 10.3687 23.8978C6.5073 23.8978 3.70719 20.644 3.70719 16.6104V16.5521C3.70719 12.5441 6.53598 9.31211 10.3687 9.31211C12.142 9.31448 13.8542 9.97091 15.1873 11.1595C15.4503 11.3483 15.7586 11.4616 16.0796 11.4875C16.4007 11.5134 16.7227 11.4509 17.0117 11.3067C17.3008 11.1624 17.5463 10.9416 17.7224 10.6676C17.8985 10.3935 17.9987 10.0764 18.0125 9.74936C18.0137 9.47206 17.952 9.19822 17.8319 8.9492C17.7119 8.70017 17.5369 8.4827 17.3205 8.31374C15.5637 6.93643 13.513 6 10.3973 6C4.30235 6 0 10.7769 0 16.6104V16.6687C0 22.5642 4.38481 27.2354 10.2683 27.2354C13.5273 27.2354 15.6928 26.1824 17.5966 24.4808C17.7764 24.3189 17.9207 24.1204 18.0201 23.8982C18.1196 23.676 18.1719 23.435 18.1738 23.1909C18.1617 22.7453 17.9795 22.3219 17.6656 22.0104C17.3518 21.699 16.931 21.5238 16.4923 21.5221V21.5221ZM29.7041 14.9853C25.8069 14.0453 24.8855 13.342 24.8855 11.7607V11.7024C24.8855 10.3506 26.0973 9.26839 28.1732 9.26839C29.7615 9.26839 31.2601 9.79308 32.8341 10.8206C33.1116 10.996 33.4322 11.0882 33.7591 11.0866C33.977 11.089 34.1933 11.0476 34.3954 10.9647C34.5976 10.8818 34.7816 10.7591 34.9369 10.6037C35.0921 10.4482 35.2156 10.2631 35.3002 10.0589C35.3848 9.85479 35.4289 9.63565 35.4298 9.41414C35.4373 9.12618 35.3692 8.84139 35.2324 8.58907C35.0957 8.33675 34.8953 8.12601 34.6518 7.97852C32.7598 6.69182 30.5246 6.02662 28.2485 6.07287C24.2401 6.07287 21.3576 8.50321 21.3576 12.023V12.0813C21.3576 15.8635 23.7776 17.1533 28.0764 18.21C31.8266 19.0881 32.6333 19.8788 32.6333 21.3472V21.4055C32.6333 22.9286 31.2494 23.9853 29.048 23.9853C26.977 23.9843 24.9735 23.2368 23.394 21.8756C23.1425 21.6924 22.8468 21.5819 22.5385 21.5558C22.2301 21.5296 21.9206 21.5888 21.6426 21.7271C21.3647 21.8653 21.1288 22.0774 20.9599 22.3409C20.7911 22.6044 20.6956 22.9095 20.6835 23.2237C20.6822 23.4928 20.7443 23.7583 20.8647 23.9979C20.9851 24.2375 21.1602 24.4444 21.3755 24.601C23.5587 26.2783 26.2216 27.1842 28.9584 27.1808C33.1998 27.1808 36.172 24.8925 36.172 21.0521V20.9938C36.1827 17.5942 33.9706 16.0384 29.7041 14.9853ZM47.5839 14.9853C43.6903 14.0453 42.7689 13.342 42.7689 11.7607V11.7024C42.7689 10.3506 43.9807 9.26839 46.0566 9.26839C47.6413 9.26839 49.1435 9.79308 50.7175 10.8206C50.995 10.996 51.3157 11.0882 51.6425 11.0866C51.8604 11.089 52.0767 11.0476 52.2788 10.9647C52.481 10.8818 52.665 10.7591 52.8203 10.6037C52.9756 10.4482 53.0991 10.2631 53.1837 10.0589C53.2683 9.85479 53.3123 9.63565 53.3132 9.41414C53.3207 9.12618 53.2526 8.84139 53.1158 8.58907C52.9791 8.33675 52.7787 8.12601 52.5352 7.97852C50.6382 6.68823 48.3962 6.02286 46.114 6.07287C42.1056 6.07287 39.2195 8.50321 39.2195 12.023V12.0813C39.2195 15.8635 41.6431 17.1533 45.9419 18.21C49.6921 19.0881 50.4988 19.8788 50.4988 21.3472V21.4055C50.4988 22.9286 49.1149 23.9853 46.9135 23.9853C44.8438 23.9835 42.8417 23.236 41.2631 21.8756C41.0112 21.6927 40.7154 21.5825 40.4069 21.5565C40.0985 21.5304 39.7888 21.5896 39.5108 21.7277C39.2327 21.8659 38.9965 22.0778 38.8272 22.3412C38.6579 22.6045 38.5618 22.9094 38.549 23.2237C38.5485 23.4926 38.611 23.7578 38.7314 23.9973C38.8517 24.2368 39.0264 24.4437 39.241 24.601C41.4259 26.2776 44.0897 27.1834 46.8274 27.1808C51.0688 27.1808 54.0375 24.8925 54.0375 21.0521V20.9938C54.0446 17.5942 51.854 16.0384 47.5839 14.9853ZM63.94 16.1586H58.5155C58.0741 16.1791 57.6574 16.3718 57.3522 16.6965C57.0469 17.0212 56.8766 17.453 56.8766 17.9021C56.8766 18.3512 57.0469 18.783 57.3522 19.1077C57.6574 19.4325 58.0741 19.6251 58.5155 19.6456H63.94C64.3815 19.6251 64.7981 19.4325 65.1034 19.1077C65.4086 18.783 65.5789 18.3512 65.5789 17.9021C65.5789 17.453 65.4086 17.0212 65.1034 16.6965C64.7981 16.3718 64.3815 16.1791 63.94 16.1586V16.1586ZM80.2818 6.36437H66.88C66.6576 6.35381 66.4355 6.3892 66.227 6.4684C66.0185 6.54759 65.828 6.66895 65.667 6.82512C65.506 6.98129 65.3778 7.16903 65.2902 7.37699C65.2027 7.58495 65.1575 7.8088 65.1575 8.035C65.1575 8.2612 65.2027 8.48505 65.2902 8.69301C65.3778 8.90097 65.506 9.08871 65.667 9.24488C65.828 9.40105 66.0185 9.52241 66.227 9.6016C66.4355 9.6808 66.6576 9.71619 66.88 9.70563H71.7811V25.246C71.7811 25.7292 71.9699 26.1925 72.3061 26.5342C72.6423 26.8759 73.0983 27.0678 73.5737 27.0678C74.0491 27.0678 74.5051 26.8759 74.8413 26.5342C75.1775 26.1925 75.3663 25.7292 75.3663 25.246V9.70563H80.2818C80.7045 9.68556 81.1033 9.50079 81.3955 9.18968C81.6876 8.87858 81.8506 8.46505 81.8506 8.035C81.8506 7.60495 81.6876 7.19142 81.3955 6.88032C81.1033 6.56921 80.7045 6.38444 80.2818 6.36437V6.36437ZM94.2106 6.36437H87.0113C86.7749 6.36043 86.54 6.40486 86.3208 6.49502C86.1015 6.58518 85.9024 6.71923 85.7351 6.8892C85.5679 7.05916 85.436 7.26157 85.3473 7.48439C85.2586 7.70721 85.2148 7.94588 85.2187 8.18621V25.2496C85.2796 25.6839 85.4926 26.0812 85.8186 26.3687C86.1447 26.6562 86.5618 26.8145 86.9934 26.8145C87.4251 26.8145 87.8422 26.6562 88.1682 26.3687C88.4942 26.0812 88.7073 25.6839 88.7681 25.2496V19.7331H93.239L98.1401 26.0949C98.3271 26.3875 98.584 26.6271 98.8869 26.7915C99.1897 26.9559 99.5285 27.0397 99.8718 27.035C100.092 27.0389 100.31 26.9987 100.515 26.9167C100.719 26.8348 100.906 26.7126 101.064 26.5573C101.222 26.402 101.349 26.2166 101.436 26.0116C101.524 25.8066 101.571 25.586 101.575 25.3626C101.555 24.847 101.35 24.3568 100.998 23.9853L97.1326 19.0298C99.8431 18.1809 101.718 16.1878 101.718 12.9011V12.8428C101.739 12.0293 101.602 11.2196 101.314 10.46C101.027 9.70038 100.595 9.00573 100.044 8.41577C98.7496 7.1259 96.7741 6.36437 94.2214 6.36437H94.2106ZM98.115 13.1052C98.115 15.1857 96.5016 16.5339 93.9632 16.5339H88.7717V9.64733H93.9345C96.559 9.64733 98.115 10.8498 98.115 13.0505V13.1052ZM107.777 6.21862C107.543 6.21326 107.31 6.25564 107.093 6.34324C106.875 6.43083 106.677 6.56188 106.509 6.72865C106.342 6.89541 106.21 7.09451 106.12 7.31419C106.03 7.53386 105.984 7.76967 105.985 8.00767V25.246C106.005 25.7098 106.201 26.1478 106.531 26.4686C106.861 26.7895 107.301 26.9685 107.758 26.9685C108.214 26.9685 108.654 26.7895 108.984 26.4686C109.314 26.1478 109.51 25.7098 109.531 25.246V8.00403C109.532 7.76947 109.488 7.53695 109.4 7.31992C109.313 7.10289 109.183 6.90565 109.02 6.73962C108.857 6.57359 108.664 6.44206 108.45 6.35263C108.237 6.2632 108.008 6.21765 107.777 6.21862V6.21862ZM130.246 21.5221C129.85 21.5191 129.467 21.6659 129.171 21.9339C127.697 23.1946 126.256 23.8978 124.123 23.8978C120.258 23.8978 117.458 20.644 117.458 16.6104V16.5521C117.458 12.5441 120.286 9.31211 124.123 9.31211C125.895 9.3147 127.606 9.97116 128.938 11.1595C129.246 11.3991 129.625 11.5274 130.013 11.5238C130.243 11.5287 130.472 11.4867 130.686 11.4004C130.9 11.314 131.094 11.185 131.259 11.021C131.423 10.857 131.553 10.6613 131.641 10.4454C131.73 10.2295 131.775 9.9978 131.774 9.76393C131.773 9.48692 131.711 9.21364 131.591 8.96487C131.471 8.71611 131.297 8.4984 131.082 8.32832C129.321 6.951 127.274 6.01458 124.159 6.01458C118.042 6.01458 113.761 10.7915 113.761 16.625V16.6833C113.761 22.5788 118.142 27.25 124.029 27.25C127.288 27.25 129.45 26.197 131.354 24.4954C131.534 24.3335 131.678 24.135 131.778 23.9128C131.877 23.6906 131.93 23.4496 131.931 23.2055C131.923 22.7567 131.742 22.3291 131.427 22.0144C131.112 21.6997 130.688 21.523 130.246 21.5221ZM144.946 15.3934L151.235 9.23924C151.431 9.07489 151.59 8.86863 151.7 8.63504C151.809 8.40145 151.867 8.14624 151.869 7.88743C151.872 7.66729 151.831 7.44889 151.749 7.24507C151.667 7.04126 151.546 6.85615 151.392 6.70065C151.239 6.54515 151.057 6.42239 150.856 6.33961C150.655 6.25683 150.44 6.21569 150.224 6.21862C149.944 6.21503 149.668 6.27539 149.414 6.39524C149.161 6.51509 148.938 6.69134 148.761 6.91092L139.188 16.6833V8.00403C139.168 7.54018 138.972 7.10224 138.642 6.78138C138.311 6.46052 137.872 6.28145 137.415 6.28145C136.958 6.28145 136.519 6.46052 136.189 6.78138C135.858 7.10224 135.663 7.54018 135.642 8.00403V25.2423C135.663 25.7062 135.858 26.1441 136.189 26.465C136.519 26.7858 136.958 26.9649 137.415 26.9649C137.872 26.9649 138.311 26.7858 138.642 26.465C138.972 26.1441 139.168 25.7062 139.188 25.2423V20.9938L142.476 17.7691L148.965 26.186C149.125 26.4441 149.347 26.6571 149.61 26.8054C149.872 26.9538 150.167 27.0327 150.467 27.035C150.7 27.0439 150.932 27.0048 151.149 26.9203C151.367 26.8358 151.565 26.7075 151.733 26.5431C151.9 26.3788 152.033 26.1817 152.124 25.9638C152.214 25.7459 152.261 25.5117 152.26 25.2751C152.257 24.7993 152.084 24.3408 151.772 23.9853L144.946 15.3934ZM163.518 14.9853C159.624 14.0453 158.703 13.342 158.703 11.7607V11.7024C158.703 10.3506 159.915 9.26839 161.99 9.26839C163.579 9.26839 165.077 9.79308 166.651 10.8206C166.929 10.996 167.25 11.0882 167.576 11.0866C167.794 11.089 168.011 11.0476 168.213 10.9647C168.415 10.8818 168.599 10.7591 168.754 10.6037C168.909 10.4482 169.033 10.2631 169.118 10.0589C169.202 9.85479 169.246 9.63565 169.247 9.41414C169.256 9.12724 169.189 8.84317 169.054 8.59095C168.92 8.33873 168.721 8.12739 168.48 7.97852C166.588 6.69182 164.353 6.02662 162.077 6.07287C158.068 6.07287 155.182 8.50321 155.182 12.023V12.0813C155.182 15.8635 157.606 17.1533 161.904 18.21C165.655 19.0881 166.461 19.8788 166.461 21.3472V21.4055C166.461 22.9286 165.077 23.9853 162.876 23.9853C160.806 23.9835 158.804 23.236 157.226 21.8756C156.974 21.6927 156.678 21.5825 156.369 21.5565C156.061 21.5304 155.751 21.5896 155.473 21.7277C155.195 21.8659 154.959 22.0778 154.79 22.3412C154.62 22.6045 154.524 22.9094 154.512 23.2237C154.511 23.4931 154.574 23.7586 154.695 23.9982C154.816 24.2379 154.991 24.4446 155.207 24.601C157.39 26.2783 160.053 27.1842 162.79 27.1808C167.031 27.1808 170 24.8925 170 21.0521V20.9938C169.989 17.5942 167.799 16.0384 163.529 14.9853H163.518Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M211.018 29V23.9655C216.367 23.9655 220.48 18.6838 218.439 13.0624C217.697 10.993 216.027 9.32513 213.955 8.58385C208.328 6.54532 203.04 10.6841 203.04 15.9967V15.9967H198C198 7.50281 206.225 0.862157 215.13 3.64197C219.026 4.84655 222.118 7.96611 223.355 11.8578C226.138 20.7841 219.521 29 211.018 29V29Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M211.017 23.9966H206.008V18.9929V18.9929H211.017V18.9929V23.9966Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M206.007 27.8589H202.142V27.8589V23.998H206.007V27.8589V27.8589Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M202.145 23.9984H198.898V23.9984V20.7861V20.7861H202.114V20.7861V23.9984H202.145Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M239.312 14.8042C238.176 14.0276 236.755 13.6275 235.098 13.6275H231.5V25.0183H235.098C236.755 25.0183 238.176 24.5946 239.312 23.7709C239.927 23.3238 240.425 22.7119 240.756 21.9352C241.087 21.1586 241.277 20.2643 241.277 19.2523C241.277 18.2403 241.111 17.346 240.756 16.5929C240.425 15.8162 239.951 15.2043 239.312 14.8042V14.8042ZM233.609 15.535H234.745C236 15.535 237.041 15.7704 237.823 16.2646C238.699 16.7824 239.148 17.7943 239.148 19.23C239.148 20.7126 238.699 21.7482 237.823 22.313V22.313C237.065 22.8072 236.047 23.0661 234.769 23.0661H233.633V15.535H233.609Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M243.809 13.463C243.454 13.463 243.17 13.5807 242.933 13.816C242.697 14.0514 242.555 14.3338 242.555 14.6868C242.555 15.0398 242.673 15.3222 242.91 15.5811C243.147 15.8165 243.454 15.9341 243.809 15.9341C244.164 15.9341 244.448 15.8165 244.709 15.5811C244.946 15.3458 245.064 15.0398 245.064 14.6868C245.064 14.3338 244.946 14.0514 244.709 13.816C244.448 13.6042 244.141 13.463 243.809 13.463V13.463Z" fill="white"/> <rect x="242.768" y="16.9687" width="2.03584" height="8.02531" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M252.164 17.6515C251.548 17.1102 250.862 16.8043 250.128 16.8043C249.015 16.8043 248.068 17.1808 247.358 17.9575C246.624 18.7106 246.269 19.6755 246.269 20.8287C246.269 21.9583 246.624 22.9233 247.334 23.6999C248.044 24.453 248.991 24.8296 250.104 24.8296C250.885 24.8296 251.548 24.6178 252.116 24.1941V24.3824C252.116 25.0414 251.927 25.5591 251.595 25.9122C251.24 26.2652 250.743 26.4535 250.151 26.4535C249.204 26.4535 248.636 26.0769 247.902 25.1355L246.529 26.4535L246.577 26.5005C246.885 26.9241 247.334 27.3242 247.926 27.7008C248.518 28.0773 249.299 28.2892 250.175 28.2892C251.382 28.2892 252.353 27.9126 253.063 27.183C253.773 26.4535 254.152 25.465 254.152 24.2647V16.969H252.164V17.6515V17.6515ZM251.619 22.3826C251.264 22.7827 250.814 22.9709 250.223 22.9709C249.631 22.9709 249.181 22.7827 248.85 22.3826C248.495 21.9825 248.329 21.4647 248.329 20.8057C248.329 20.1468 248.495 19.629 248.85 19.2289C249.205 18.8288 249.655 18.6406 250.223 18.6406C250.814 18.6406 251.264 18.8288 251.619 19.2289C251.974 19.629 252.14 20.1703 252.14 20.8057C252.164 21.4647 251.974 21.9825 251.619 22.3826V22.3826Z" fill="white"/> <rect x="255.883" y="16.9687" width="2.03584" height="8.02531" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M256.924 13.463C256.569 13.463 256.285 13.5807 256.048 13.816C255.811 14.0514 255.669 14.3338 255.669 14.6868C255.669 15.0398 255.788 15.3222 256.024 15.5811C256.261 15.8165 256.569 15.9341 256.924 15.9341C257.279 15.9341 257.563 15.8165 257.823 15.5811C258.06 15.3458 258.178 15.0398 258.178 14.6868C258.178 14.3338 258.06 14.0514 257.823 13.816C257.563 13.6042 257.279 13.463 256.924 13.463V13.463Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M262.367 14.8034H260.379V16.9686H259.219V18.8043H260.379V22.1227C260.379 23.1582 260.592 23.9113 260.994 24.3349C261.421 24.7586 262.154 24.9939 263.172 24.9939C263.504 24.9939 263.835 24.9939 264.167 24.9704H264.261V23.1347L263.575 23.1817C263.101 23.1817 262.77 23.0876 262.604 22.9229C262.438 22.7581 262.367 22.4051 262.367 21.8638V18.8278H264.261V16.9921H262.367V14.8034V14.8034Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M273.78 13.603H275.815V24.9937H273.78V13.603Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M296.291 22.1231C295.936 22.5232 295.557 22.8762 295.273 23.0645V23.0645C294.989 23.2527 294.634 23.3233 294.232 23.3233C293.64 23.3233 293.143 23.1115 292.764 22.6644C292.385 22.2172 292.172 21.6524 292.172 20.9699C292.172 20.2874 292.361 19.7226 292.74 19.2754C293.119 18.8282 293.616 18.6164 294.208 18.6164C294.871 18.6164 295.557 19.0165 296.149 19.7226L297.498 18.4517V18.4517C296.623 17.322 295.51 16.8043 294.184 16.8043C293.072 16.8043 292.101 17.2043 291.32 18.0045C290.539 18.8047 290.136 19.7932 290.136 20.9934C290.136 22.1937 290.539 23.2057 291.32 23.9823C292.101 24.7825 293.072 25.1826 294.184 25.1826C295.652 25.1826 296.836 24.5471 297.64 23.394L296.291 22.1231V22.1231Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M304.624 18.1001C304.34 17.7 303.938 17.3705 303.464 17.1352C302.991 16.8998 302.423 16.7822 301.784 16.7822C300.647 16.7822 299.724 17.2058 299.038 18.006C298.351 18.8297 298.02 19.8417 298.02 21.0184C298.02 22.2422 298.399 23.2307 299.132 24.0073C299.866 24.7604 300.86 25.1605 302.068 25.1605C303.441 25.1605 304.553 24.6192 305.406 23.5366L305.453 23.4895L304.127 22.2187V22.2187C304.009 22.3599 303.82 22.5246 303.678 22.6894C303.488 22.8776 303.299 23.0188 303.086 23.113C302.778 23.2542 302.447 23.3483 302.068 23.3483C301.5 23.3483 301.05 23.1836 300.695 22.8541C300.363 22.5481 300.174 22.1481 300.127 21.6303H305.5L305.524 20.9007C305.524 20.383 305.453 19.8887 305.311 19.418C305.122 18.9238 304.908 18.5002 304.624 18.1001V18.1001ZM300.197 19.982C300.292 19.6055 300.481 19.276 300.718 19.0407C301.002 18.7818 301.357 18.6406 301.783 18.6406C302.281 18.6406 302.659 18.7818 302.92 19.0642C303.156 19.3231 303.298 19.629 303.322 20.0056H300.197V19.982Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M312.414 17.5809V17.5809C311.798 17.0631 310.946 16.8043 309.881 16.8043C309.195 16.8043 308.579 16.9455 308.011 17.2279C307.49 17.4868 306.969 17.9339 306.638 18.5223L306.662 18.5458L307.964 19.7932C308.508 18.9459 309.1 18.64 309.881 18.64C310.307 18.64 310.662 18.7576 310.923 18.9694C311.183 19.1813 311.325 19.4637 311.325 19.8402V20.2403C310.828 20.0991 310.331 20.005 309.834 20.005C308.816 20.005 308.011 20.2403 307.395 20.711C306.78 21.1817 306.472 21.8642 306.472 22.7114C306.472 23.4646 306.733 24.0765 307.253 24.5236C307.774 24.9708 308.437 25.1826 309.218 25.1826C309.999 25.1826 310.71 24.8766 311.372 24.3353V24.9943H313.361V19.8402C313.337 18.8518 313.029 18.0987 312.414 17.5809V17.5809ZM308.814 21.9348C309.051 21.7701 309.359 21.6995 309.785 21.6995C310.282 21.6995 310.803 21.7936 311.323 21.9819V22.7585C310.874 23.1586 310.282 23.3704 309.572 23.3704C309.217 23.3704 308.956 23.2998 308.767 23.1351C308.577 22.9939 308.483 22.8056 308.483 22.5467C308.483 22.2878 308.577 22.076 308.814 21.9348V21.9348Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M321.148 17.721C320.58 17.0856 319.798 16.7797 318.78 16.7797C317.976 16.7797 317.313 17.015 316.839 17.4622V16.9679H314.851V24.9932H316.887V20.5687C316.887 19.9568 317.029 19.4861 317.313 19.1331C317.597 18.7801 317.999 18.6154 318.52 18.6154C318.97 18.6154 319.325 18.7566 319.585 19.0625C319.846 19.3685 319.964 19.7921 319.964 20.3334V24.9697H322V20.3334C322 19.2273 321.716 18.3565 321.148 17.721V17.721Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M271.225 17.5809V17.5809C270.609 17.0631 269.757 16.8043 268.692 16.8043C268.005 16.8043 267.39 16.9455 266.821 17.2279C266.301 17.4868 265.78 17.9339 265.448 18.5223L265.472 18.5458L266.774 19.7932C267.319 18.9459 267.91 18.64 268.692 18.64C269.118 18.64 269.473 18.7576 269.733 18.9694C269.994 19.1813 270.136 19.4637 270.136 19.8402V20.2403C269.638 20.0991 269.141 20.005 268.644 20.005C267.626 20.005 266.821 20.2403 266.206 20.711C265.59 21.1817 265.283 21.8642 265.283 22.7114C265.283 23.4646 265.543 24.0765 266.064 24.5236C266.585 24.9708 267.248 25.1826 268.029 25.1826C268.81 25.1826 269.52 24.8766 270.183 24.3353V24.9943H272.171V19.8402C272.148 18.8518 271.84 18.0987 271.225 17.5809V17.5809ZM267.625 21.9348C267.862 21.7701 268.169 21.6995 268.595 21.6995C269.092 21.6995 269.613 21.7936 270.134 21.9819V22.7585C269.684 23.1586 269.092 23.3704 268.382 23.3704C268.027 23.3704 267.767 23.2998 267.577 23.1351C267.388 22.9939 267.293 22.8056 267.293 22.5467C267.293 22.2878 267.388 22.076 267.625 21.9348V21.9348Z" fill="white"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M283.153 25.1587C279.91 25.1587 277.259 22.5228 277.259 19.2986C277.259 16.0744 279.91 13.4385 283.153 13.4385C286.396 13.4385 289.048 16.0744 289.048 19.2986C289.048 22.5228 286.42 25.1587 283.153 25.1587V25.1587ZM283.152 15.4859C281.045 15.4859 279.341 17.1804 279.341 19.275C279.341 21.3696 281.045 23.0641 283.152 23.0641C285.259 23.0641 286.963 21.3696 286.963 19.275C286.963 17.1804 285.259 15.4859 283.152 15.4859V15.4859Z" fill="white"/> <path d="M231.652 9H231.156L232.412 3.1H233.912C234.315 3.1 234.637 3.16667 234.88 3.3C235.123 3.43333 235.299 3.612 235.408 3.836C235.517 4.06 235.572 4.30667 235.572 4.576C235.572 4.92267 235.513 5.236 235.396 5.516C235.281 5.79333 235.117 6.03333 234.904 6.236C234.693 6.43867 234.441 6.59333 234.148 6.7C233.855 6.80667 233.532 6.86 233.18 6.86H232.108L231.652 9ZM232.148 6.676L231.98 6.424H233.172C233.559 6.424 233.895 6.34667 234.18 6.192C234.465 6.03467 234.687 5.81733 234.844 5.54C235.001 5.26267 235.08 4.94 235.08 4.572C235.08 4.36133 235.037 4.18 234.952 4.028C234.867 3.87333 234.729 3.75333 234.54 3.668C234.351 3.58 234.1 3.536 233.788 3.536H232.592L232.872 3.26L232.148 6.676ZM237.474 9.076C237.111 9.076 236.799 9.004 236.538 8.86C236.276 8.71333 236.075 8.51067 235.934 8.252C235.792 7.99333 235.722 7.692 235.722 7.348C235.722 6.97467 235.786 6.62667 235.914 6.304C236.044 5.98133 236.224 5.7 236.454 5.46C236.686 5.21733 236.956 5.02933 237.266 4.896C237.578 4.76 237.915 4.692 238.278 4.692C238.643 4.692 238.955 4.76667 239.214 4.916C239.475 5.06533 239.675 5.26933 239.814 5.528C239.952 5.784 240.022 6.07467 240.022 6.4C240.022 6.79467 239.955 7.156 239.822 7.484C239.691 7.80933 239.51 8.09067 239.278 8.328C239.046 8.56533 238.775 8.74933 238.466 8.88C238.159 9.01067 237.828 9.076 237.474 9.076ZM237.51 8.632C237.886 8.632 238.224 8.54133 238.526 8.36C238.83 8.176 239.071 7.92133 239.25 7.596C239.428 7.268 239.518 6.88667 239.518 6.452C239.518 6.18533 239.468 5.95467 239.37 5.76C239.271 5.56267 239.127 5.40933 238.938 5.3C238.751 5.19067 238.52 5.136 238.246 5.136C237.952 5.136 237.682 5.192 237.434 5.304C237.188 5.41333 236.975 5.56667 236.794 5.764C236.615 5.96133 236.475 6.19067 236.374 6.452C236.275 6.71333 236.226 6.996 236.226 7.3C236.226 7.71067 236.336 8.036 236.558 8.276C236.782 8.51333 237.099 8.632 237.51 8.632ZM243.959 9L243.627 4.752H244.055L244.379 8.76H244.287L245.967 4.752H246.499L244.639 9H243.959ZM241.159 9L241.095 4.752H241.595L241.579 8.76H241.483L243.503 4.752H243.967L241.843 9H241.159ZM246.97 7.084L247.066 6.64H250.506L250.406 6.78C250.42 6.724 250.432 6.65867 250.442 6.584C250.453 6.50667 250.458 6.42267 250.458 6.332C250.458 6.11067 250.413 5.91067 250.322 5.732C250.234 5.55067 250.1 5.40667 249.918 5.3C249.737 5.19333 249.506 5.14 249.226 5.14C248.925 5.14 248.649 5.196 248.398 5.308C248.15 5.42 247.934 5.576 247.75 5.776C247.569 5.97333 247.428 6.204 247.326 6.468C247.228 6.72933 247.178 7.012 247.178 7.316C247.178 7.57467 247.225 7.80267 247.318 8C247.414 8.19733 247.56 8.35067 247.754 8.46C247.949 8.56933 248.194 8.624 248.49 8.624C248.738 8.624 248.958 8.59467 249.15 8.536C249.345 8.47467 249.51 8.39467 249.646 8.296C249.785 8.19733 249.896 8.09333 249.978 7.984C250.064 7.872 250.122 7.76667 250.154 7.668H250.654C250.614 7.82533 250.534 7.98667 250.414 8.152C250.297 8.31467 250.142 8.46667 249.95 8.608C249.758 8.74933 249.533 8.864 249.274 8.952C249.018 9.03733 248.733 9.08 248.418 9.08C248.056 9.08 247.745 9.00667 247.486 8.86C247.23 8.71067 247.034 8.50533 246.898 8.244C246.765 7.98 246.698 7.676 246.698 7.332C246.698 6.96133 246.764 6.61733 246.894 6.3C247.028 5.98 247.212 5.7 247.446 5.46C247.684 5.21733 247.958 5.02933 248.27 4.896C248.582 4.76 248.917 4.692 249.274 4.692C249.632 4.692 249.933 4.76667 250.178 4.916C250.426 5.06267 250.614 5.26267 250.742 5.516C250.87 5.76933 250.934 6.05467 250.934 6.372C250.934 6.484 250.924 6.60667 250.902 6.74C250.884 6.87333 250.861 6.988 250.834 7.084H246.97ZM251.615 9L252.515 4.752H253.011L252.747 6.004L252.559 5.948C252.604 5.81467 252.673 5.676 252.767 5.532C252.86 5.38533 252.977 5.248 253.119 5.12C253.26 4.992 253.424 4.88933 253.611 4.812C253.8 4.732 254.012 4.692 254.247 4.692C254.415 4.692 254.549 4.70667 254.651 4.736C254.755 4.76533 254.817 4.788 254.839 4.804L254.603 5.284C254.579 5.26533 254.528 5.24133 254.451 5.212C254.376 5.18267 254.261 5.168 254.107 5.168C253.883 5.168 253.685 5.212 253.515 5.3C253.344 5.38533 253.199 5.49733 253.079 5.636C252.959 5.77467 252.861 5.92267 252.787 6.08C252.715 6.23733 252.664 6.38667 252.635 6.528L252.107 9H251.615ZM255.181 7.084L255.277 6.64H258.717L258.617 6.78C258.631 6.724 258.643 6.65867 258.653 6.584C258.664 6.50667 258.669 6.42267 258.669 6.332C258.669 6.11067 258.624 5.91067 258.533 5.732C258.445 5.55067 258.311 5.40667 258.129 5.3C257.948 5.19333 257.717 5.14 257.437 5.14C257.136 5.14 256.86 5.196 256.609 5.308C256.361 5.42 256.145 5.576 255.961 5.776C255.78 5.97333 255.639 6.204 255.537 6.468C255.439 6.72933 255.389 7.012 255.389 7.316C255.389 7.57467 255.436 7.80267 255.529 8C255.625 8.19733 255.771 8.35067 255.965 8.46C256.16 8.56933 256.405 8.624 256.701 8.624C256.949 8.624 257.169 8.59467 257.361 8.536C257.556 8.47467 257.721 8.39467 257.857 8.296C257.996 8.19733 258.107 8.09333 258.189 7.984C258.275 7.872 258.333 7.76667 258.365 7.668H258.865C258.825 7.82533 258.745 7.98667 258.625 8.152C258.508 8.31467 258.353 8.46667 258.161 8.608C257.969 8.74933 257.744 8.864 257.485 8.952C257.229 9.03733 256.944 9.08 256.629 9.08C256.267 9.08 255.956 9.00667 255.697 8.86C255.441 8.71067 255.245 8.50533 255.109 8.244C254.976 7.98 254.909 7.676 254.909 7.332C254.909 6.96133 254.975 6.61733 255.105 6.3C255.239 5.98 255.423 5.7 255.657 5.46C255.895 5.21733 256.169 5.02933 256.481 4.896C256.793 4.76 257.128 4.692 257.485 4.692C257.843 4.692 258.144 4.76667 258.389 4.916C258.637 5.06267 258.825 5.26267 258.953 5.516C259.081 5.76933 259.145 6.05467 259.145 6.372C259.145 6.484 259.135 6.60667 259.113 6.74C259.095 6.87333 259.072 6.988 259.045 7.084H255.181ZM261.526 9.076C261.072 9.076 260.714 8.93067 260.45 8.64C260.186 8.34933 260.054 7.94133 260.054 7.416C260.054 7.048 260.108 6.7 260.218 6.372C260.33 6.044 260.487 5.75467 260.69 5.504C260.895 5.25067 261.14 5.05333 261.426 4.912C261.711 4.768 262.028 4.696 262.378 4.696C262.666 4.696 262.922 4.756 263.146 4.876C263.372 4.996 263.551 5.16133 263.682 5.372C263.812 5.58267 263.878 5.82533 263.878 6.1C263.878 6.172 263.872 6.248 263.862 6.328C263.851 6.40533 263.839 6.46667 263.826 6.512L263.486 6.52C263.499 6.47467 263.508 6.424 263.514 6.368C263.522 6.30933 263.526 6.26 263.526 6.22C263.526 6.01733 263.475 5.83467 263.374 5.672C263.275 5.50933 263.139 5.38133 262.966 5.288C262.795 5.19467 262.6 5.148 262.382 5.148C262.091 5.148 261.832 5.208 261.606 5.328C261.382 5.44533 261.192 5.608 261.038 5.816C260.883 6.02133 260.764 6.25867 260.682 6.528C260.602 6.79467 260.562 7.076 260.562 7.372C260.562 7.76933 260.656 8.07467 260.846 8.288C261.038 8.50133 261.308 8.608 261.658 8.608C261.922 8.608 262.17 8.54667 262.402 8.424C262.636 8.30133 262.836 8.13867 263.002 7.936C263.17 7.73067 263.279 7.504 263.33 7.256L263.722 7.264C263.65 7.6 263.507 7.90533 263.294 8.18C263.08 8.45467 262.819 8.67333 262.51 8.836C262.203 8.996 261.875 9.076 261.526 9.076ZM262.958 9L264.286 2.748H264.782L263.454 9H262.958ZM268.755 9.076C268.47 9.076 268.214 9.01467 267.987 8.892C267.76 8.76933 267.582 8.60133 267.451 8.388C267.323 8.172 267.259 7.92667 267.259 7.652C267.259 7.57733 267.263 7.50533 267.271 7.436C267.282 7.36667 267.294 7.30667 267.307 7.256L267.643 7.248C267.635 7.28 267.627 7.32267 267.619 7.376C267.614 7.42933 267.611 7.48133 267.611 7.532C267.611 7.73467 267.66 7.91733 267.759 8.08C267.86 8.24267 267.996 8.372 268.167 8.468C268.34 8.56133 268.536 8.608 268.755 8.608C269.043 8.608 269.299 8.54933 269.523 8.432C269.75 8.312 269.94 8.148 270.095 7.94C270.252 7.732 270.371 7.49467 270.451 7.228C270.531 6.96133 270.571 6.68 270.571 6.384C270.571 5.97867 270.479 5.67067 270.295 5.46C270.111 5.24933 269.843 5.144 269.491 5.144C269.243 5.144 269 5.204 268.763 5.324C268.526 5.444 268.32 5.604 268.147 5.804C267.974 6.004 267.86 6.22533 267.807 6.468L267.423 6.456C267.495 6.12 267.643 5.81867 267.867 5.552C268.091 5.28533 268.356 5.076 268.663 4.924C268.972 4.76933 269.29 4.692 269.615 4.692C270.071 4.692 270.428 4.83733 270.687 5.128C270.948 5.41867 271.079 5.83067 271.079 6.364C271.079 6.732 271.023 7.08 270.911 7.408C270.802 7.73333 270.644 8.02133 270.439 8.272C270.234 8.52267 269.988 8.72 269.703 8.864C269.418 9.00533 269.102 9.076 268.755 9.076ZM266.775 9L268.107 2.748H268.603L267.275 9H266.775ZM271.22 10.776C271.121 10.776 271.031 10.7693 270.948 10.756C270.865 10.7453 270.816 10.736 270.8 10.728L270.892 10.284C270.921 10.3027 270.975 10.3173 271.052 10.328C271.127 10.3413 271.2 10.348 271.272 10.348C271.456 10.348 271.619 10.3027 271.76 10.212C271.904 10.1213 272.031 10.0067 272.14 9.868C272.249 9.72933 272.344 9.58667 272.424 9.44L272.66 9.012L272.084 4.752H272.588L273.072 8.552H272.984L275.036 4.752H275.568L272.976 9.42C272.848 9.652 272.707 9.87067 272.552 10.076C272.4 10.284 272.217 10.452 272.004 10.58C271.791 10.7107 271.529 10.776 271.22 10.776Z" fill="white"/> <line x1="184.5" y1="-2.18557e-08" x2="184.5" y2="32" stroke="white" stroke-opacity="0.5"/> </svg> </a> </div> <div class="header-middle-area"> <nav id="main-nav" class="main-nav" role="navigation"> <ul id="menu-primary" class="menu"><li id="menu-item-379211" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-379211"><a href="https://css-tricks.com/category/articles/"><span>Articles</span></a></li> <li id="menu-item-379212" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-379212"><a href="https://css-tricks.com/category/notes/"><span>Notes</span></a></li> <li id="menu-item-379154" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-379154"><a href="https://css-tricks.com/category/links/"><span>Links</span></a></li> <li id="menu-item-377808" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-377808"><a href="/guides"><span>Guides</span></a></li> <li id="menu-item-377809" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-377809"><a href="/almanac"><span>Almanac</span></a></li> <li id="menu-item-382690" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-382690"><a href="https://css-tricks.com/picks/"><span>Picks</span></a></li> <li id="menu-item-379272" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379272"><a href="/random"><span>Shuffle</span></a></li> </ul></nav> <div class="search-and-account"> <a href="https://www.google.com/search?q=site:css-tricks.com%20layout" class="jetpack-search-filter__link"> <span class="screen-reader-text">Search</span> <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.0726 10.4326C12.4801 10.4326 10.4 12.5451 10.4 15.1053C10.4 17.6978 12.5125 19.7779 15.0726 19.7779C17.6651 19.7779 19.7453 17.6654 19.7453 15.1053C19.744 12.544 17.664 10.4326 15.0726 10.4326Z" fill="white"/> <path d="M16.0327 0.447479C7.42401 0.447479 0.447693 7.4238 0.447693 16.0324C0.447693 24.6398 7.42401 31.6161 16.0314 31.6161C24.64 31.6161 31.6163 24.6398 31.6163 16.0324C31.6163 7.4238 24.64 0.447479 16.0327 0.447479ZM23.6163 24.0324C23.3926 24.2562 23.0401 24.385 22.6563 24.385C22.2726 24.385 21.9526 24.2575 21.6963 24.0324L18.7526 21.0887L18.4651 21.2487C17.4088 21.825 16.2576 22.145 15.0724 22.145C11.1998 22.145 8.06509 19.0087 8.06509 15.1376C8.06509 11.265 11.2013 8.13023 15.0724 8.13023C18.9451 8.13023 22.0798 11.2665 22.0798 15.1376C22.0798 16.5138 21.6961 17.8251 20.9273 18.9776L20.7348 19.2976L23.6473 22.2101C23.8711 22.4664 24.0311 22.7864 24.0311 23.1376C23.9998 23.4563 23.8723 23.7763 23.616 24.0326L23.6163 24.0324Z" fill="white"/> </svg> </a> </div> </div> </header> <div class="page-wrap"> <div class="articles-and-sidebar "> <main id="post-20319"> <article> <header class="mega-header"> <div class="tags"> <a href="https://css-tricks.com/tag/svg/" rel="tag">SVG</a> <a href="https://css-tricks.com/tag/svg-filters/" rel="tag">svg filters</a> <a href="https://css-tricks.com/tag/svg-icons/" rel="tag">svg icons</a> </div> <h1 class="article-title"> Using SVG </h1> <div class="author-row"> <a href="https://css-tricks.com/author/chriscoyier/" aria-label="Author page of Chris Coyier"> <img loading="lazy" alt='Avatar of Chris Coyier' src='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67' srcset='https://css-tricks.com/wp-content/cache/breeze-extra/gravatars/8081b26e05bb4354f7d65ffc34cbbd67 2x' class='avatar avatar-80 photo skip-lazy' height='80' width='80' decoding='async'/> </a> <div> <a class="author-name" href="https://css-tricks.com/author/chriscoyier/"> Chris Coyier </a> on <time datetime="2019-05-02"> May 2, 2019 </time> </div> </div> </header> <div class="article-sponsor"> <p> Get affordable and hassle-free WordPress hosting plans with Cloudways, now offering <a href="https://www.cloudways.com/en/wordpress-hosting.php?id=1223312">40% off for 4 months, and 40 free migrations</a>. </p> </div> <div class="article-content"> <p>SVG is an image format for vector graphics. It literally means <strong>Scalable Vector Graphics</strong>. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.</p> <p><span id="more-20319"></span></p> <h3><a href="#aa-why-use-svg-at-all" aria-hidden="true" class="aal_anchor" id="aa-why-use-svg-at-all"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Why use SVG at all?</h3> <ul> <li>Small file sizes that compress well</li> <li>Scales to any size without losing clarity (except very tiny)</li> <li>Looks great on retina displays</li> <li>Design control like interactivity and filters</li> </ul> <h3><a href="#aa-getting-some-svg-to-work-with" aria-hidden="true" class="aal_anchor" id="aa-getting-some-svg-to-work-with"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Getting some SVG to work with</h3> <p>Design something in Adobe Illustrator. Here’s a Kiwi bird standing on an oval.</p> <figure id='post-20383 media-20383' class='align-none'><img loading="lazy" data-recalc-dims="1" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2013/03/kiwi.png" alt='' /></figure> <p>Notice the artboard is cropped up right against the edges of the design. Canvas matters in SVG just like it would in PNG or JPG.</p> <p>You can save the file directly from Adobe Illustrator as an SVG file.</p> <figure id='post-20384 media-20384' class='align-none'><img loading="lazy" data-recalc-dims="1" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2013/03/save-as-svg.png" alt=''></figure> <p>As you save it, you’ll get another dialog for SVG Options. I honestly don’t know much about all this. There is a whole spec for <a href="http://www.w3.org/TR/SVGMobile/" rel="noopener">SVG Profiles</a>. I find SVG 1.1 works fine.</p> <figure id='post-20385 media-20385' class='align-none'><img loading="lazy" data-recalc-dims="1" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2013/03/svg-options.png" alt='' /></figure> <p>The interesting part here is that you can either press OK and save the file, or press “SVG Code…” and it will open TextEdit (on a Mac anyway) with the SVG code in it. </p> <figure id='post-20386 media-20386' class='align-none'><img loading="lazy" data-recalc-dims="1" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2013/03/svg-code.png" alt='' /></figure> <p>Both can be useful.</p> <h3><a href="#aa-using-svg-as-an-img" aria-hidden="true" class="aal_anchor" id="aa-using-svg-as-an-img"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using SVG as an <img></h3> <p>If I save the SVG to a file, I can use it directly in an <code><img></code> tag.</p> <pre rel="HTML"><code class="language-markup"><img src="kiwi.svg" alt="Kiwi standing on oval"></code></pre> <p>In Illustrator, our artboard was 612px ✕ 502px.</p> <figure id='post-20387 media-20387' class='align-none'><img loading="lazy" data-recalc-dims="1" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2013/03/artboard.png" alt='' /></figure> <p>That’s exactly how big the image will on the page, left to itself. You can change the size of it though just by selecting the <code>img</code> and changing its <code>width</code> or <code>height</code>, again like you could a PNG or JPG. Here’s <a href="http://codepen.io/chriscoyier/pen/evcBu" rel="noopener">an example</a> of that:</p> <pre class="codepen" data-height="300" style="height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;" data-type="result" data-href="lCEux" data-user="chriscoyier" data-safe="true"><code></code><a href="http://codepen.io/chriscoyier/pen/lCEux" rel="noopener">Check out this Pen!</a></pre> <h4><a href="#aa-browser-support" aria-hidden="true" class="aal_anchor" id="aa-browser-support"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Browser support</h4> <p>Using it this way has its own set of specific <a href="http://caniuse.com/#feat=svg-img" rel="noopener">browser support</a>. Essentially: it works everywhere except IE 8 and down and Android 2.3 and down. </p> <p>If you’d like to use SVG, but also need to support these browsers that don’t support using SVG in this way, you have options. I’ve covered different techniques in <a href="https://css-tricks.com/workshop-notes-webstock-13/">different</a> <a href="https://css-tricks.com/workshop-notes-from-incontrol-hawaii/">workshops</a> <a href="https://css-tricks.com/deseret-digital-workshop/">I’ve done</a>. </p> <p>One way is to test for support with Modernizr and swap out the <code>src</code> of the image:</p> <pre rel="jQuery"><code class="language-javascript">if (!Modernizr.svg) { $(".logo img").attr("src", "images/logo.png"); }</code></pre> <p>David Bushell has a really <a href="http://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/" rel="noopener">simple alternative</a>, if you’re OK with JavaScript in the markup:</p> <pre rel="HTML"><code class="language-markup"><img src="image.svg" onerror="this.onerror=null; this.src='image.png'"></code></pre> <p><a href="http://benhowdle.im/svgeezy/" rel="noopener">SVGeezy</a> can also help. We’ll cover more fallback techniques as this article progresses.</p> <h3><a href="#aa-using-svg-as-a-background-image" aria-hidden="true" class="aal_anchor" id="aa-using-svg-as-a-background-image"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using SVG as a background-image</h3> <p>Similarly easy to using SVG as an img, you can use it in CSS as a <code>background-image</code>.</p> <pre rel="HTML"><code class="language-markup"><a href="/" class="logo"> Kiwi Corp </a></code></pre> <pre rel="CSS"><code class="language-css">.logo { display: block; text-indent: -9999px; width: 100px; height: 82px; background: url(kiwi.svg); background-size: 100px 82px; }</code></pre> <p>Notice we set the background-size to the size of the logo element. We have to do that otherwise we’ll just see a bit of the upper left of our much larger original SVG image. These numbers are aspect-ratio aware of the original size. But you could use a <code>background-size</code> keywords like <code>contain</code> if you want to make sure the image will fit and can’t know the parent image will be of the exact right size.</p> <h4><a href="#aa-browser-support" aria-hidden="true" class="aal_anchor" id="aa-browser-support"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Browser support</h4> <p>Using SVG as background-image has its own special set of <a href="http://caniuse.com/#feat=svg-css" rel="noopener">browser support</a>, but it’s essentially the same as using SVG as img. The only problem browsers are IE 8 and down and Android 2.3 and down.</p> <p>Modernizr can help us here, and in a more efficient way than using img. If we replace the <code>background-image</code> with a supported format, only one HTTP request will be made instead of two. Modernizr adds a class name of “no-svg” to the html element if it doesn’t support SVG, so we use that:</p> <pre rel="CSS"><code class="language-css">.main-header { background: url(logo.svg) no-repeat top left; background-size: contain; } .no-svg .main-header { background-image: url(logo.png); }</code></pre> <p>Another clever progressive enhancement flavored technique for using SVG as background-image is by using it in conjunction with multiple backgrounds. SVG and multiple backgrounds have very similar browser support, so if the browser supports multiple backgrounds, it supports SVG, and the declaration will work (and override any previous declaration).</p> <pre rel="CSS"><code class="language-css">body { background: url(fallback.png); background-image: url(image.svg), none; }</code></pre> <h3><a href="#aa-the-problem-with-both-img-and-background-image" aria-hidden="true" class="aal_anchor" id="aa-the-problem-with-both-img-and-background-image"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The problem with both <img> and background-image…</h3> <p>Is that you don’t get to control the innards of the SVG with CSS like you can with the following two ways. Read on!</p> <h3><a href="#aa-using-inline-svg" aria-hidden="true" class="aal_anchor" id="aa-using-inline-svg"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using “inline” SVG</h3> <p>Remember how you can grab the SVG code right from Illustrator while saving if you want? (You can also just open the SVG file in a text editor and grab that code.) You can drop that code right into an HTML document and the SVG image will show up just the same as if you put it in an img.</p> <pre rel="HTML"><code class="language-markup"><body>  </body></code></pre> <p>This can be nice because the image comes over right in the document and doesn’t need to make an additional HTTP request. In other words, it has the same advantages as using a <a href="https://css-tricks.com/data-uris/">Data URI</a>. It has the same disadvantages too. A potentially “bloated” document, a big chunk of crap right in the document you’re trying to author, and inability to cache.</p> <p>If you’re using a back end language that can go fetch the file and insert it, at least you can clean up the authoring experience. Like:</p> <pre rel="PHP"><code class="language-markup"><?php echo file_get_contents("kiwi.svg"); ?></code></pre> <p>A little PHP-specific thing here… it was demonstrated to me that <code>file_get_contents()</code> is the correct function here, not <code>include()</code> or <code>include_once()</code> as I have used before. Specifically because SVG sometimes is exported with <code><?xml version="1.0" encoding="UTF-8"?></code> that as the opening line, which will cause the PHP parser to choke on it.</p> <h4><a href="#aa-optimize-it-first" aria-hidden="true" class="aal_anchor" id="aa-optimize-it-first"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Optimize it first</h4> <p>Likely not a huge shocker, but the SVG that Adobe Illustrator gives you isn’t particularly optimized. It has a DOCTYPE and generator notes and all that junk. SVG is already pretty small, but why not do all we can? Peter Collingridge has an online <a href="http://petercollingridge.appspot.com/svg-optimiser" rel="noopener">SVG Optimiser</a> tool. Upload the old, download the new. In <a href="http://www.youtube.com/watch?v=iVzW3XuOm7E&feature=youtu.be" rel="noopener">Kyle Foster’s video</a>, he even takes it the extra mile and removes line breaks after this optimization. </p> <p>If you’re even more hardcore, here is a <a href="https://github.com/svg/svgo" rel="noopener">Node JS tool</a> for doing it yourself.</p> <h4><a href="#aa-now-you-can-control-with-css" aria-hidden="true" class="aal_anchor" id="aa-now-you-can-control-with-css"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Now you can control with CSS!</h4> <p>See how the SVG looks a lot like HTML? That’s because they are both essentially XML (named tags with angle brackets with stuff inside). In our design, we have two elements that make up the design, an <code><ellipse></code> and an <code><path></code>. We can jump into the code and give them class names, just like any other HTML element can have.</p> <pre rel="SVG"><code class="language-markup"><svg ...> <ellipse class="ground" .../> <path class="kiwi" .../> </svg></code></pre> <p>Now in any CSS on this page we can control those individual elements with special SVG CSS. This doesn’t have to be CSS embedded in the SVG itself, it can be anywhere, even in our global stylesheet <code><link></code>ed up. Note that SVG elements have a special set of CSS properties that work on them. For instance, it’s not <code>background-color</code>, it’s <code>fill</code>. You can use normal stuff like :hover though.</p> <pre rel="CSS"><code class="language-css">.kiwi { fill: #94d31b; } .kiwi:hover { fill: #ace63c; }</code></pre> <p>Even cooler, SVG has all these fancy filters. For instance blurring. Chuck a filter in your <code><svg></code>:</p> <pre rel="SVG"><code class="language-markup"><svg ...> ... <filter id="pictureFilter" > <feGaussianBlur stdDeviation="5" /> </filter> </svg></code></pre> <p>Then you can apply that in your CSS as needed:</p> <pre rel="CSS"><code class="language-css">.ground:hover { filter: url(#pictureFilter); }</code></pre> <p>Here’s <a href="http://codepen.io/chriscoyier/pen/evcBu" rel="noopener">an example</a> of all that:</p> <pre class="codepen" data-height="300" style="height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;" data-type="result" data-href="evcBu" data-user="chriscoyier" data-safe="true"><code></code><a href="http://codepen.io/chriscoyier/pen/evcBu" rel="noopener">Check out this Pen!</a></pre> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content" rel="noopener">More on applying filters to SVG</a></li> <li><a href="http://www.opera.com/docs/specs/presto25/svg/cssproperties/" rel="noopener">The best list I could find on SVG-specific CSS properties</a> (specific to Opera)</li> <li><a href="http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_svg-filter-effects.htm" rel="noopener">SVG filter effects playground</a> (from Microsoft)</li> </ul> <h4><a href="#aa-browser-support" aria-hidden="true" class="aal_anchor" id="aa-browser-support"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Browser support</h4> <p>Inline SVG has it’s own <a href="http://caniuse.com/#feat=svg-html5" rel="noopener">set of browser support</a>, but again, it’s essentially only an issue in IE 8 and down and Android 2.3 and down<sup>1</sup>. </p> <p>One way to handle fallbacks for this type of SVG is:</p> <pre rel="HTML"><code class="language-markup"><svg> ... </svg> <div class="fallback"></div></code></pre> <p>Then use Modernizr again:</p> <pre rel="CSS"><code class="language-css">.fallback { display: none; /* Make sure it's the same size as the SVG takes up */ } .no-svg .fallback { background-image: url(logo.png); }</code></pre> <h3><a href="#aa-using-svg-as-an-object" aria-hidden="true" class="aal_anchor" id="aa-using-svg-as-an-object"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using SVG as an <object></h3> <p>If “inline” SVG just isn’t your jam (remember it does have some legit drawbacks like being hard to cache), you can link to an SVG file and retain the ability to affect its parts with CSS by using <code><object></code>.</p> <pre rel="HTML"><code class="language-markup"><object type="image/svg+xml" data="kiwi.svg" class="logo"> Kiwi Logo  </object></code></pre> <p>For the fallback, Modernizr detection will work fine here:</p> <pre rel="CSS"><code class="language-css">.no-svg .logo { width: 200px; height: 164px; background-image: url(kiwi.png); }</code></pre> <p>This will work great with caching and actually has <em>deeper</em> support than using it any other way. But, if you want the CSS stuff to work, you can’t use an external stylesheet or <code><style></code> on the document, you need to use a <code><style></code> element inside the SVG file itself.</p> <pre rel="SVG"><code class="language-markup"><svg ...> <style> /* SVG specific fancy CSS styling here */ </style> ... </svg></code></pre> <h4><a href="#aa-external-stylesheets-for-object-svg" aria-hidden="true" class="aal_anchor" id="aa-external-stylesheets-for-object-svg"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>External stylesheets for <object> SVG</h4> <p>SVG has a way to declare an external stylesheet, which can be nice for authoring and caching and whatnot. This only works with <code><object></code> embedding of SVG files as far as I’ve tested. You’ll need to put this in the SVG file above the opening <code><svg></code> tag. </p> <pre rel="HTML"><code class="language-markup"><?xml-stylesheet type="text/css" href="svg.css" ?></code></pre> <p>If you put that in your HTML, the page will barf and not even try to render. If you link up an SVG file that has that in it as an <code><img></code> or <code>background-image</code>, it won’t barf, but it won’t work (the SVG will still render though). </p> <h3><a href="#aa-data-urls-for-svg" aria-hidden="true" class="aal_anchor" id="aa-data-urls-for-svg"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Data URL’s for SVG</h3> <p>Another way to use SVG’s is to convert them into Data URL’s. Data URL’s might not save you actual file size, but can be more efficient because the data is right there. It doesn’t require an additional network request. </p> <p>Mobilefish.com has <a href="http://www.mobilefish.com/services/base64/base64.php" rel="noopener">an online conversion tool</a> for that base64ing them, but <a href="https://css-tricks.com/probably-dont-base64-svg/">I generally don’t think that’s a good idea</a> for SVG. Simply paste in the contents of your SVG file and fill out the form and it will display the results in a textarea for you to copy. Remember to remove line breaks in the data it gives you back. It looks like pure gibberish:</p> <figure id='post-20388 media-20388' class='align-none'><img loading="lazy" data-recalc-dims="1" src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2013/03/base64-data.png" alt='' /></figure> <p>You can use that anywhere we’ve talked about so far (except inline <code><svg></code> because that just doesn’t make sense) Just put the gibberish where it says [data] in these examples.</p> <p><a href="https://yoksel.github.io/url-encoder/" rel="noopener">This converter</a> is my fav, as it leaves the SVG as mostly readable text:</p> <p><iframe src="https://yoksel.github.io/url-encoder/" style="width: 100%; height: 900px;"></iframe></p> <h4><a href="#aa-as-img" aria-hidden="true" class="aal_anchor" id="aa-as-img"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>As <img></h4> <pre rel="HTML"><code class="language-markup"><img src="data:image/svg+xml;base64,[data]"></code></pre> <h4><a href="#aa-as-css" aria-hidden="true" class="aal_anchor" id="aa-as-css"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>As CSS</h4> <pre rel="CSS"><code class="language-css">.logo { background: url("data:image/svg+xml;base64,[data]"); }</code></pre> <p>Relevant note here: regular CSS doesn’t care if you put quotes around the data URI, but Sass does, so I’ve quoted it above (Thx Oziel Perez).</p> <h4><a href="#aa-as-object" aria-hidden="true" class="aal_anchor" id="aa-as-object"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>As <object></h4> <pre rel="HTML"><code class="language-markup"><object type="image/svg+xml" data="data:image/svg+xml;base64,[data]"> fallback </object></code></pre> <p>And yep, if you have an embedded <code><style></code> in your SVG before you base64 it, <a href="http://codepen.io/chriscoyier/pen/ioCjk" rel="noopener">it will work</a> if you use it as an <code><object></code> still!</p> <h4><a href="#aa-format-for-data-uri" aria-hidden="true" class="aal_anchor" id="aa-format-for-data-uri"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Format for Data URI</h4> <p>All the examples above have base64 as the encoding, but data URI’s do not have to be base64. In fact in the case of SVG, it’s probably <a href="https://css-tricks.com/probably-dont-base64-svg/">better NOT to use base64</a>. Primarily because the native format of SVG is much more repetitive than base64 ends up, it gzips better. </p> <pre rel="HTML"><code class="language-markup"> data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL...  data:image/svg+xml;charset=UTF-8,<svg ...> ... </svg>  data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://...'  data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//...</code></pre> <p>Command line thingy for base64ing SVG:</p> <blockquote class="twitter-tweet"> <p>@<a href="https://twitter.com/chriscoyier" rel="noopener">chriscoyier</a> @<a href="https://twitter.com/hkfoster" rel="noopener">hkfoster</a> maybe you could take a shortcut with >>> echo -n `cat logo.svg` | base64 | pbcopy</p> <p>— Benny Schudel (@bennyschudel) <a href="https://twitter.com/bennyschudel/status/307963605998006273" rel="noopener">March 2, 2013</a></p></blockquote> <p></p> <p>Or alternatively <a href="http://superuser.com/questions/120796/os-x-base64-encode-via-command-line#comment280484_120815" rel="noopener">Mathias Bynens has some techniques</a>:</p> <blockquote><p>Use <code>openssl base64 < path/to/file.png | tr -d '\n' | pbcopy</code> or <code>cat path/to/file.png | openssl base64 | tr -d '\n' | pbcopy</code> to skip writing to a file and just copy the base64-encoded output to the clipboard without the line breaks.</p></blockquote> <p>And a <a href="http://jpillora.com/base64-encoder/" rel="noopener">drag-and-drop tool</a>.</p> <h3><a href="#aa-automation-tools" aria-hidden="true" class="aal_anchor" id="aa-automation-tools"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Automation Tools</h3> <ul> <li><a href="https://github.com/filamentgroup/grunticon" rel="noopener">grunticon</a>:<br /> <blockquote><p>From a CSS perspective, it’s easy to use, as it generates a class referencing each icon, and doesn’t use CSS sprites.</p> <p>grunticon takes a folder of SVG/PNG files (typically, icons that you’ve drawn in an application like Adobe Illustrator), and outputs them to CSS in 3 formats: svg data urls, png data urls, and a third fallback CSS file with references to regular png images, which are also automatically generated and placed in a folder.</p></blockquote> </li> <li><a href="https://github.com/jkphl/iconizr" rel="noopener">iconizr</a>:<br /> <blockquote><p>A PHP command line tool for converting SVG images to a set of CSS icons (SVG & PNG, single icons and / or CSS sprites) with support for image optimization and Sass output.</p></blockquote> </li> </ul> <h3><a href="#aa-related-stuff" aria-hidden="true" class="aal_anchor" id="aa-related-stuff"><svg aria-hidden="true" class="aal_svg" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Related Stuff</h3> <ul> <li>David Bushell: <a href="http://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/" rel="noopener">A Primer to Front-end SVG Hacking</a></li> <li>David Bushell: <a href="http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/" rel="noopener">Resolution Independence With SVG</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/SVG" rel="noopener">MDN on SVG</a></li> <li>Browser support for <a href="http://caniuse.com/#search=svg" rel="noopener">a variety of different SVG related things</a>.</li> <li>Peter Gasston: <a href="http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/" rel="noopener">Better SVG Sprites With Fragment Identifiers</a></li> <li>simuari: <a href="http://simurai.com/post/20251013889/svg-stacks" rel="noopener">SVG Stacks</a></li> <li><a href="https://svgdotjs.github.io/" rel="noopener">SVG.js</a> – “A lightweight library for manipulating and animating SVG.”</li> <li>Emmet has <a href="http://docs.emmet.io/actions/base64/" rel="noopener">an awesome way</a> to get a data URI from an SVG right from your code editor.</li> <li>Compass <a href="http://compass-style.org/reference/compass/helpers/inline-data/" rel="noopener">has a helper</a> for data URIs too.</li> <li>Adobe: <a href="http://blogs.adobe.com/webplatform/2013/01/08/svg-styling/" rel="noopener">Styling SVG</a></li> <li>Andrew J. Baker: <a href="http://buildnewgames.com/taming-the-svg-beast/" rel="noopener">Taming the SVG Beast</a></li> <li>Illustrator alternatives: <a href="http://inkscape.org/" rel="noopener">Inkscape</a>, <a href="http://www.bohemiancoding.com/sketch/#4" rel="noopener">Sketch</a></li> <li>Krister Kari: <a href="http://kristerkari.github.com/adventures-in-webkit-land/blog/2013/03/08/dealing-with-svg-images-in-mobile-browsers/" rel="noopener">Dealing with SVG images in mobile browsers</a></li> </ul> <p>Kyle Foster’s <a href="http://www.youtube.com/watch?v=iVzW3XuOm7E&feature=youtu.be" rel="noopener">An Optimized SVG Workflow</a>, which is worth an embed:</p> <p><iframe data-video-id="iVzW3XuOm7E?rel=0" class="br-lazy" data-breeze="//www.youtube.com/embed/iVzW3XuOm7E?rel=0" width="480" height="360" frameborder="0" allowfullscreen></iframe></p> <p>… and the <a href="http://www.youtube.com/watch?v=1AdX8odLC8M&feature=youtu.be" rel="noopener">follow up</a> + <a href="http://kylefoster.me/svg-slides/" rel="noopener">slides</a>.</p> <hr> <p><sup>1</sup> <small>And speaking of Android 2.3 browser, <a href="https://twitter.com/paul_irish/status/309037258638512129" rel="noopener">this</a>. But if you absolutely have to support the native browser, <a href="http://www.kendoui.com/blogs/teamblog/posts/12-02-17/using_svg_on_android_2_x_and_kendo_ui_dataviz.aspx" rel="noopener">this</a>.</small></p> </div> </article> </main> <aside class="entry-unrelated sidebar"> <div id="scroll-ad-position"></div> <div id="all-modules"></div> </aside> </div> <div class="related-ads-comments-wrap"> <div class="related-ads-comments"> <div class="articles-and-sidebar"> <div class="after-article-note article-sponsor"> <em>Psst!</em> Create a DigitalOcean account and get <a href="https://try.digitalocean.com/css-tricks/?utm_medium=content_acq&utm_source=css-tricks&utm_campaign=global_brand_ad_en&utm_content=conversion_postarticle_psst">$200 in free credit</a> for cloud-based hosting and services. </div> </div> <section class="respond-area"> <h2 class="comments-title" id="comments"> <span>Comments</span> </h2> <ol class="commentlist" id="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-297245"> <div class="comment-wrap" id="comment-297245"> <div class="comment-author-wrap"> <div class="comment-author">Tom Hermans</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297245"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T16:13:23-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>Seriously comprehensive article Chris, opus indeed. Is going straight to the TOP resources folder in the bookmarks.<br /> Already been busy with SVG, the way I handled the fallbacks back then was swapping out the extension .svg for .png if Modernizr showed browser didn’t cut the mustard..</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297245-674661cb4e29c' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297245&origin=css-tricks.com&obj_id=45537868-297245-674661cb4e29c' data-name='like-comment-frame-45537868-297245-674661cb4e29c'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-339227"> <div class="comment-wrap" id="comment-339227"> <div class="comment-author-wrap"> <div class="comment-author">Oliver</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-339227"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-04-02T04:00:35-06:00">April 2, 2013</time></div> </div> <div class="comment-content"> <p>+1</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-339227-674661cb4e65a' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=339227&origin=css-tricks.com&obj_id=45537868-339227-674661cb4e65a' data-name='like-comment-frame-45537868-339227-674661cb4e65a'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1 featured" id="li-comment-297246"> <div class="comment-wrap" id="comment-297246"> <div class="comment-author-wrap"> <div class="comment-author">Jake Rayson</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297246"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T16:13:50-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>Thank you for the post Chris, I needed an SVG low-down. Just to say that <a href="http://inkscape.org/" rel="nofollow ugc">Inkscape</a> is a magnificent cross-platform, open source SVG vector editing program, <em>way</em> better than Illustrator ;) plus SVG is its native format.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297246-674661cb4ea63' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297246&origin=css-tricks.com&obj_id=45537868-297246-674661cb4ea63' data-name='like-comment-frame-45537868-297246-674661cb4ea63'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-297250"> <div class="comment-wrap" id="comment-297250"> <div class="comment-author-wrap"> <div class="comment-author">Timothy</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297250"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T16:26:23-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>+1. Inkscape is great on Windows/Linux.</p> <p>Not so great on Mac though. <a href="http://bohemiancoding.com/sketch/" rel="nofollow ugc">Sketch</a> is a much nicer experience on a Mac.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297250-674661cb4eeb4' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297250&origin=css-tricks.com&obj_id=45537868-297250-674661cb4eeb4' data-name='like-comment-frame-45537868-297250-674661cb4eeb4'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even depth-2" id="li-comment-298531"> <div class="comment-wrap" id="comment-298531"> <div class="comment-author-wrap"> <div class="comment-author">Christos</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298531"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-07T09:11:29-07:00">March 7, 2013</time></div> </div> <div class="comment-content"> <p>I did a test with Inkscape, a simple text image saved as svg but there is nothing on the browser. I tried other images from internet and works fine. Is there some special setting that I have to use in Inkscape?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298531-674661cb4f1f6' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298531&origin=css-tricks.com&obj_id=45537868-298531-674661cb4f1f6' data-name='like-comment-frame-45537868-298531-674661cb4f1f6'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt depth-2" id="li-comment-298819"> <div class="comment-wrap" id="comment-298819"> <div class="comment-author-wrap"> <div class="comment-author">traq</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298819"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-07T21:50:49-07:00">March 7, 2013</time></div> </div> <div class="comment-content"> <p>@Christos Inskape saves as “Inkscape SVG” or as “Plain SVG” – the latter is the format you want for the web. But in most cases, either will work, and I’ve never had one simply “not show up.” Can you view the image on your computer (whatever picture viewer you normally use)? Can you re-open the image in Inkscape?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298819-674661cb4f4d9' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298819&origin=css-tricks.com&obj_id=45537868-298819-674661cb4f4d9' data-name='like-comment-frame-45537868-298819-674661cb4f4d9'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even depth-2" id="li-comment-577535"> <div class="comment-wrap" id="comment-577535"> <div class="comment-author-wrap"> <div class="comment-author">Ravish Malik</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-577535"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-10-07T18:10:02-06:00">October 7, 2013</time></div> </div> <div class="comment-content"> <p>I work on Inkscape for all my professional graphics, on a mac. It just screws up the shortcuts which you need to edit, and done. Plus, I had to disable a ‘pasteboard’ setting to allow it to copy vectors files as-is from other mac apps. That’s it and it works great!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-577535-674661cb4f832' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=577535&origin=css-tricks.com&obj_id=45537868-577535-674661cb4f832' data-name='like-comment-frame-45537868-577535-674661cb4f832'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-297247"> <div class="comment-wrap" id="comment-297247"> <div class="comment-author-wrap"> <div class="comment-author">Eric</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297247"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T16:16:27-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>This is awesome, Thanks Chris. Alright, so If we can treat svgs like imgs, can we use them for fluid text? . . . sounds like a codepen I’m going to have knockout.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297247-674661cb4fbe6' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297247&origin=css-tricks.com&obj_id=45537868-297247-674661cb4fbe6' data-name='like-comment-frame-45537868-297247-674661cb4fbe6'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1 featured" id="li-comment-297248"> <div class="comment-wrap" id="comment-297248"> <div class="comment-author-wrap"> <div class="comment-author">Ben Frain</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297248"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T16:19:53-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>Compass users don’t forget you can base64 svgs into CSS just by using ‘inline-image’ instead of ‘image-url’.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297248-674661cb50082' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297248&origin=css-tricks.com&obj_id=45537868-297248-674661cb50082' data-name='like-comment-frame-45537868-297248-674661cb50082'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-312308"> <div class="comment-wrap" id="comment-312308"> <div class="comment-author-wrap"> <div class="comment-author">Brad</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-312308"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-21T15:31:10-06:00">March 21, 2013</time></div> </div> <div class="comment-content"> <p>Ohh… what does this look like?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-312308-674661cb5046b' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=312308&origin=css-tricks.com&obj_id=45537868-312308-674661cb5046b' data-name='like-comment-frame-45537868-312308-674661cb5046b'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-297249"> <div class="comment-wrap" id="comment-297249"> <div class="comment-author-wrap"> <div class="comment-author">Shaimoom Newaz</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297249"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T16:21:29-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>Just when I thought I learned it all, there came SVG. Thanks for the inside scoop on this. Look forward to harnessing its power.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297249-674661cb50780' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297249&origin=css-tricks.com&obj_id=45537868-297249-674661cb50780' data-name='like-comment-frame-45537868-297249-674661cb50780'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-297252"> <div class="comment-wrap" id="comment-297252"> <div class="comment-author-wrap"> <div class="comment-author">Ben Frain</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297252"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T16:31:27-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>Also, if using Inkscape there’s some pointers here for how to optimise: <a href="http://benfrain.com/tips-for-using-svgs-in-web-projects/" rel="nofollow ugc">http://benfrain.com/tips-for-using-svgs-in-web-projects/</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297252-674661cb50bff' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297252&origin=css-tricks.com&obj_id=45537868-297252-674661cb50bff' data-name='like-comment-frame-45537868-297252-674661cb50bff'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1 featured" id="li-comment-297255"> <div class="comment-wrap" id="comment-297255"> <div class="comment-author-wrap"> <div class="comment-author">eQRoeil</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297255"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T16:42:37-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>Another cool feature with svg : you can use media-queries <strong>inside</strong> the <style> element (inside your svg)</p> <p>This way the image responds to the parent size (<object> for example) . Then you can reorganize content into your svg depending on parent size : a smaller text, or “blocks” of content position (text is at the right of the “image” in landscape orientation and goes to the top in portrait mode)</p> <p>I’ve made an <em>ugly</em> demo of this here (go to the bottom of the page and click on “give it a try” link) a “tag” appears at the top right corner of the screen and reads “you can use svg in responsive web design” into wide screens and “use svg in RWD” into smaller ones.</p> <p>Onto this page you’ll find some ways to embed svg<br /> The snippet I used was (is still?) useful when some browsers show an unwanted padding at the bottom on resize. Since I made this browser support got better, I’m not sure it is still needed (I have to make some new tests…)</p> <p>The zebra svg color changes with breakpoints</p> <p>You can also use javascript inside svg and filters are quite well supported in browsers ; ) (sometimes in a better way than illustrator or inkscape)</p> <p>Inkscape is a free and open source software dedicated to svg, very useful …</p> <p>Pascal</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297255-674661cb50fe6' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297255&origin=css-tricks.com&obj_id=45537868-297255-674661cb50fe6' data-name='like-comment-frame-45537868-297255-674661cb50fe6'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-297257"> <div class="comment-wrap" id="comment-297257"> <div class="comment-author-wrap"> <div class="comment-author">eQRoeil</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297257"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T16:44:20-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>forgot the link to my demo :( , sorry :<br /> <a href="http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php" rel="nofollow ugc">http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297257-674661cb51383' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297257&origin=css-tricks.com&obj_id=45537868-297257-674661cb51383' data-name='like-comment-frame-45537868-297257-674661cb51383'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-297943"> <div class="comment-wrap" id="comment-297943"> <div class="comment-author-wrap"> <div class="comment-author">@cwebba1</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297943"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T07:37:38-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Hi @eqroeil, your posted comment addresses what I’ve been trying to figure out – how to make SVG work in responsive design. No one is addressing this.</p> <p>Here’s my codepen: <a href="http://codepen.io/cwebba1/pen/qItAC#" rel="nofollow ugc">http://cdpn.io/qItAC</a></p> <p>On the left is #ALA art – the paint brush. Next is my logo and then a second version of the paint brush. The 2nd version and the logo both have width and height removed, only veiwBox and “preserveAspectRatio=”xMinYMin meet”. These scale with the container but they break the object box. Why why why?</p> <p>I have been searching for the right solution. Your example works. I will be pulling it apart today to understand why! Any comments would be most appreciated.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297943-674661cb516fc' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297943&origin=css-tricks.com&obj_id=45537868-297943-674661cb516fc' data-name='like-comment-frame-45537868-297943-674661cb516fc'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-297258"> <div class="comment-wrap" id="comment-297258"> <div class="comment-author-wrap"> <div class="comment-author">Nick</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297258"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T16:45:44-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>I’ve been trying to use SVG images as a background image on responsive div’s:</p> <p><code>div class="span4"</code></p> <p>but unlike an <code>img</code> I cannot use <code>width="100%"</code> which will automatically scale it, and despite my <code>div</code> resizing as the browser window changes size, the background svg dimensions will stay the same. This is not really specific to SVG’s as it happens with PNG’s/JPG’s too but something you need to keep in mind.</p> <p>Not a problem in modern browsers, but your usual suspects (IE 8 and lower and possibly IE9) have trouble with this.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297258-674661cb51a62' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297258&origin=css-tricks.com&obj_id=45537868-297258-674661cb51a62' data-name='like-comment-frame-45537868-297258-674661cb51a62'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-297264"> <div class="comment-wrap" id="comment-297264"> <div class="comment-author-wrap"> <div class="comment-author">eQRoeil</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297264"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T16:55:23-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>You should have a look with preserveAspectRatio=”xMinYMin meet” added to your svg and only keep viewBox=”0 0 800 960″ (removing width and height, but it should not be necessary…)</p> <p>into your css try background-size: cover (or contain)</p> <p>maybe…</p> <p>as a fallback for ie : conditionnal classes and png fallback ; )</p> <p>.ie8 .span4{<br /> background: url(thepngone.png);<br /> }</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297264-674661cb51ded' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297264&origin=css-tricks.com&obj_id=45537868-297264-674661cb51ded' data-name='like-comment-frame-45537868-297264-674661cb51ded'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt depth-2" id="li-comment-297999"> <div class="comment-wrap" id="comment-297999"> <div class="comment-author-wrap"> <div class="comment-author">TNK</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297999"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T08:39:08-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>I dont think is what you needed but it might be useful for someone.<br /> Responsive element with SVG as background keeping ratio:</p> <pre><code> #shape { background-image: url(../img/shape.svg); background-size: 100% 100%; width: 10%; } #shape:after { padding-top: 300%; /* % based on the image original ratio 100 x 300px*/ display: block; content: ''; } </code></pre> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297999-674661cb5219e' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297999&origin=css-tricks.com&obj_id=45537868-297999-674661cb5219e' data-name='like-comment-frame-45537868-297999-674661cb5219e'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1 buried" id="li-comment-297259"> <div class="comment-wrap" id="comment-297259"> <div class="comment-author-wrap"> <div class="comment-author">Scriptist</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297259"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T16:47:51-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>Nice post Chris! Tiny bug in your object fallback though:</p> <p><code><br /> .no-svg .logo {<br />   background-image: url(kiwi.svg);<br /> }<br /> </code></p> <p>Should be</p> <p><code><br /> .no-svg .logo {<br />   background-image: url(kiwi.png);<br /> }<br /> </code></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297259-674661cb52534' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297259&origin=css-tricks.com&obj_id=45537868-297259-674661cb52534' data-name='like-comment-frame-45537868-297259-674661cb52534'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment byuser comment-author-chriscoyier bypostauthor odd alt depth-2" id="li-comment-297261"> <div class="comment-wrap" id="comment-297261"> <div class="comment-author-wrap"> <div class="comment-author">Chris Coyier</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297261"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T16:49:17-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>Thanks! Burying cause fixed.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297261-674661cb52a88' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297261&origin=css-tricks.com&obj_id=45537868-297261-674661cb52a88' data-name='like-comment-frame-45537868-297261-674661cb52a88'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-297271"> <div class="comment-wrap" id="comment-297271"> <div class="comment-author-wrap"> <div class="comment-author">Karl Spencer</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297271"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T17:09:09-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>Good to get more info on fallbacks for SVG. I’ll have to get to work on them for my websites.</p> <p>My last two designs have included nothing but SVGs in the main layout with background textures, header images, logos and other elements being nothing but SVG. They look awesome on a Retina display! What I have noticed however is that the graphics do tend to look slightly different across browsers. On Storiva.com for example, It appears that Fireworks is correctly interpreting some of my gradients in the header background as an ellipse gradient, whereas in Chrome and Safari, they appear to be interpreted as radial gradients, resulting in slightly less vivid colors. I thought that was rather interesting, but definitely not a deal breaker.</p> <p>Anyway, thanks for such a thorough review Chris! Much appreciated.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297271-674661cb52dc7' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297271&origin=css-tricks.com&obj_id=45537868-297271-674661cb52dc7' data-name='like-comment-frame-45537868-297271-674661cb52dc7'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-297278"> <div class="comment-wrap" id="comment-297278"> <div class="comment-author-wrap"> <div class="comment-author">hans_jv</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297278"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T17:19:02-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>I had an issue with svg in ie10 (and possibly 9) recently.</p> <p>I was building a site that had a svg logo in header and footer. In the header (which as position: fixed) I used a div tag with the svg as background, and in the footer I used it as a img tag. The background in the a tag is used in the original size, while the img tag is a little smaller for design purposes.</p> <p>The issue is that sometimes explorer moves and crops the background in the header when another element with the same svg file as source is set at a different size. This problem is happening in ie10 but I think it happens in ie9 as well.</p> <p>I’ve made a fiddle in: <a href="http://jsfiddle.net/uK2La/" rel="nofollow ugc">http://jsfiddle.net/uK2La/</a><br /> (I have also made a pen at <a href="http://codepen.io/anon/pen/zviwF" rel="nofollow ugc">http://codepen.io/anon/pen/zviwF</a> but most of the time the error doesn’t show until you resize the window).</p> <p>I solved it in this specific case, however I don’t know if this is an ie bug or I missed something. Other browsers seems to work fine.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297278-674661cb531fb' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297278&origin=css-tricks.com&obj_id=45537868-297278-674661cb531fb' data-name='like-comment-frame-45537868-297278-674661cb531fb'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-298613"> <div class="comment-wrap" id="comment-298613"> <div class="comment-author-wrap"> <div class="comment-author">Chris</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298613"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-07T13:06:53-07:00">March 7, 2013</time></div> </div> <div class="comment-content"> <p>hi,<br /> <a href="http://jsfiddle.net/uK2La/14/" rel="nofollow ugc">http://jsfiddle.net/uK2La/14/</a></p> <p>seems IE10 uses the exact same image and somehow fouls up, workaround seems an extra parameter for one image. Will have other issues (like cache I guess) but seems to work. You should file a bug report at Microsoft, generally I have fewer problems with IE10 than e.g. Chrome with stuff.</p> <p>BTW, the classList API works nicely for your example… supported in anything except IE<=9 it seems.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298613-674661cb540c0' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298613&origin=css-tricks.com&obj_id=45537868-298613-674661cb540c0' data-name='like-comment-frame-45537868-298613-674661cb540c0'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-297297"> <div class="comment-wrap" id="comment-297297"> <div class="comment-author-wrap"> <div class="comment-author">Paul</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297297"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T17:57:06-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>Great Article! Thank you, I really have been struggling with how to incorporate svg into my projects lately.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297297-674661cb544f7' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297297&origin=css-tricks.com&obj_id=45537868-297297-674661cb544f7' data-name='like-comment-frame-45537868-297297-674661cb544f7'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-297309"> <div class="comment-wrap" id="comment-297309"> <div class="comment-author-wrap"> <div class="comment-author">pk</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297309"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T18:27:07-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>The canvas size gets old fast if you’re not used to it. One thing that I’ve found helpful when saving as SVG is to select your art and then go to: object>artboard>fit selected to art. Hope that makes someone else’s life a bit easier.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297309-674661cb54891' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297309&origin=css-tricks.com&obj_id=45537868-297309-674661cb54891' data-name='like-comment-frame-45537868-297309-674661cb54891'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-297417"> <div class="comment-wrap" id="comment-297417"> <div class="comment-author-wrap"> <div class="comment-author">Jeff</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297417"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T20:21:04-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>How do you handle SVGs inside a link? I’ve been trying to figure out the best way to do this.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297417-674661cb54bbc' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297417&origin=css-tricks.com&obj_id=45537868-297417-674661cb54bbc' data-name='like-comment-frame-45537868-297417-674661cb54bbc'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-297442"> <div class="comment-wrap" id="comment-297442"> <div class="comment-author-wrap"> <div class="comment-author">James</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297442"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T20:52:06-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>I’ve been using this method as a fallback for SVGs as background images –</p> <pre><code>.main-header { background: no-repeat top left; background-image: url(logo.png); background-image: url(logo.svg); background-size: contain; }</code></pre> <p>The idea is that the SVG will either override or be ignored depending on support.</p> <p>It’s a bit simpler than Chris’ method. Seems to work well for me but maybe there is there a flaw in this that I’m not seeing that somebody could point out?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297442-674661cb54ea3' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297442&origin=css-tricks.com&obj_id=45537868-297442-674661cb54ea3' data-name='like-comment-frame-45537868-297442-674661cb54ea3'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-297936"> <div class="comment-wrap" id="comment-297936"> <div class="comment-author-wrap"> <div class="comment-author">Vinay Raghu</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297936"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T07:31:22-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>You will be loading both unnecessarily, when only one is going to be displayed. But I think this is pretty neat to get it to work, though.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297936-674661cb55183' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297936&origin=css-tricks.com&obj_id=45537868-297936-674661cb55183' data-name='like-comment-frame-45537868-297936-674661cb55183'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even depth-2" id="li-comment-298122"> <div class="comment-wrap" id="comment-298122"> <div class="comment-author-wrap"> <div class="comment-author">James</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298122"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T17:56:35-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Never thought about that Vinay, so I decided to check with Chrome and Firefox’s network profiler and only the svg file seems to be downloaded. Can’t be bothered firing up VMware to test IE but I’d assume it’s the same. Still wondering if there is a problem with this method because it feels almost too easy.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298122-674661cb55493' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298122&origin=css-tricks.com&obj_id=45537868-298122-674661cb55493' data-name='like-comment-frame-45537868-298122-674661cb55493'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt depth-2" id="li-comment-302735"> <div class="comment-wrap" id="comment-302735"> <div class="comment-author-wrap"> <div class="comment-author">Kevin</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-302735"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-13T10:42:45-06:00">March 13, 2013</time></div> </div> <div class="comment-content"> <p>I’m pretty sure you’ll be loading both in every example used above. The difference between the one above and the one by James is the simplicity. The only way to be sure not download both is to use a data URI (pre-loaded) or check for browser support before elements start loading and replace/insert different extensions.</p> <p>You can also try:</p> <pre><code>.main-header { background: no-repeat top left; background-image: url(logo.png); background-image: url(logo.svg); background-size: contain; } :root .main-header { background-image: url(logo.svg); } </code></pre> <p><code>:root</code> has the same level of support as svg for desktop browsers at least. Not sure about mobile ones. Since invalid selectors and properties are ignored, the svg file will only be downloaded in more modern browsers. The downside is that browsers supporting svg will download both :(</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-302735-674661cb55823' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=302735&origin=css-tricks.com&obj_id=45537868-302735-674661cb55823' data-name='like-comment-frame-45537868-302735-674661cb55823'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even depth-2" id="li-comment-946499"> <div class="comment-wrap" id="comment-946499"> <div class="comment-author-wrap"> <div class="comment-author">Dawid Urbański</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-946499"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-12-25T16:07:07-07:00">December 25, 2013</time></div> </div> <div class="comment-content"> <p>This was my first idea when I read article. Why not use simple cascading rules to achieve this fallback? I decided to look further at this and I can tell you why this is wrong. I am 100% that in almost every browser (actually on every I tested, and I tested on lot) will load ONLY one image. This was my first WOW. But could this be so simple? Answer is NO. As only one image is loaded there is no fallback. If .svg will not load (becasue is not supported for example) then nothing will load. That situation appear for example in IE8.</p> <p>Regards.<br /> Dawid.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-946499-674661cb55af1' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=946499&origin=css-tricks.com&obj_id=45537868-946499-674661cb55af1' data-name='like-comment-frame-45537868-946499-674661cb55af1'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-297460"> <div class="comment-wrap" id="comment-297460"> <div class="comment-author-wrap"> <div class="comment-author">Justin</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297460"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T21:12:48-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>Also consider, this method for creating a PNG fallback for browsers that throw an error on SVG within an img element. jQuery:</p> <pre><code>// use ".svg" img class attribute when the src is a SVG $(function() { $(".svg").error(function() { $(this).attr("src",function() { return $(this).attr("src").replace(".svg",".png"); }); }); }); </code></pre> <p>Demo: <a href="http://wedelivery.com/lab/svg/" rel="nofollow ugc">http://wedelivery.com/lab/svg/</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297460-674661cb55de1' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297460&origin=css-tricks.com&obj_id=45537868-297460-674661cb55de1' data-name='like-comment-frame-45537868-297460-674661cb55de1'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-297467"> <div class="comment-wrap" id="comment-297467"> <div class="comment-author-wrap"> <div class="comment-author">Peter Foti</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297467"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T21:20:17-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>If a browser doesn’t support SVG and you want to provide a fallback for your content, you might as well attempt to replace all of them. Defining a specific pattern and sticking to it will help. For example, maybe all of your fallback images are named the same as the SVG file except with a .png extension instead of .svn:</p> <pre><code> if (!Modernizr.svg) { $('img[src$=".svg"]').each(function() { var $this = $(this); // this = img $this.attr('src', $this.attr('src').replace(/svg$/, 'png')); }); } </code></pre> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297467-674661cb560ff' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297467&origin=css-tricks.com&obj_id=45537868-297467-674661cb560ff' data-name='like-comment-frame-45537868-297467-674661cb560ff'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment byuser comment-author-chriscoyier bypostauthor odd alt depth-2" id="li-comment-297631"> <div class="comment-wrap" id="comment-297631"> <div class="comment-author-wrap"> <div class="comment-author">Chris Coyier</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297631"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T23:52:05-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>Nice!</p> <p>Just as a note to someone who might use this: remember that you actually have to produce those .png replacements and have them side by side in the same directory, every time.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297631-674661cb5649c' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297631&origin=css-tricks.com&obj_id=45537868-297631-674661cb5649c' data-name='like-comment-frame-45537868-297631-674661cb5649c'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-297469"> <div class="comment-wrap" id="comment-297469"> <div class="comment-author-wrap"> <div class="comment-author">Julian</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297469"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T21:20:43-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>Thanks for sharing this Chris, great write up.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297469-674661cb56716' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297469&origin=css-tricks.com&obj_id=45537868-297469-674661cb56716' data-name='like-comment-frame-45537868-297469-674661cb56716'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-297474"> <div class="comment-wrap" id="comment-297474"> <div class="comment-author-wrap"> <div class="comment-author">Matthew Lein</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297474"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T21:27:26-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>Chris, please mention this important SVG issue with Firefox:</p> <p>In Firefox, SVG used as a css background-img is bitmapped at its original designed dimensions, before it is scaled up or down. This results in very blurry images when upscaling a small SVG. Some suggest to simple use a gigantic SVG so you never upscale, only downscale. But I have seen horrible performance when you use a huge SVG and downscale (though that when the element was 3d transformed and animated).</p> <p>Kinda funny that this implementation of SVG isn’t S or V…</p> <p>Check this page in FF, it shows the bug well<br /> <a href="http://dbushell.com/demos/svg/scaling-09-03-12/" rel="nofollow ugc">http://dbushell.com/demos/svg/scaling-09-03-12/</a></p> <p>(bugzilla is under maintenance, but this might be the bug, I can’t check now)<br /> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=600207" rel="nofollow ugc">https://bugzilla.mozilla.org/show_bug.cgi?id=600207</a></p> <p>Workaround is the above mentioned other options, like inline SVG.</p> <p>Firefox for many many versions has not fixed that bug. As a result, I don’t think SVG as a CSS background is a good option at the moment. Which is sad because background-cover and centering makes it such an attractive option.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297474-674661cb578ae' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297474&origin=css-tricks.com&obj_id=45537868-297474-674661cb578ae' data-name='like-comment-frame-45537868-297474-674661cb578ae'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-297932"> <div class="comment-wrap" id="comment-297932"> <div class="comment-author-wrap"> <div class="comment-author">Gabe</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297932"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T07:29:26-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Thank you! I was about to post something similar. I’ve had some serious frustrations trying to use SVG background, only to see it look terrible in FF. Inline definitely helps, but there are some real advantages to backround images and it’s interesting that Firefox still has this bug.</p> <p>Check out <a href="http://d.pr/i/u64L" rel="nofollow ugc">this side by side close up</a> of apple.com’s menu, which uses a SVG sprite. Chrome is on the left, FF on the right.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297932-674661cb57cf6' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297932&origin=css-tricks.com&obj_id=45537868-297932-674661cb57cf6' data-name='like-comment-frame-45537868-297932-674661cb57cf6'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt depth-2" id="li-comment-299178"> <div class="comment-wrap" id="comment-299178"> <div class="comment-author-wrap"> <div class="comment-author">Jim</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-299178"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-08T13:06:47-07:00">March 8, 2013</time></div> </div> <div class="comment-content"> <p>I actually ran into the opposite when setting up svg’s for mobile. Firefox for mobile displayed them perfectly where as chrome for mobile pixelated them so badly that I ended up scrapping the svgs and using double sized pngs scaled down using background-size.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-299178-674661cb57f96' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=299178&origin=css-tricks.com&obj_id=45537868-299178-674661cb57f96' data-name='like-comment-frame-45537868-299178-674661cb57f96'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even depth-2" id="li-comment-317853"> <div class="comment-wrap" id="comment-317853"> <div class="comment-author-wrap"> <div class="comment-author">Karl Kelman</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-317853"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-25T13:35:35-06:00">March 25, 2013</time></div> </div> <div class="comment-content"> <p>I’ve tried all of the workarounds for FF, and they all seem to be less than 100% effective. Go David Bushell’s home page, and you’ll see that his .svg logo gets blurry and less blurry as you zoom in and out with FF.</p> <p>Using an img tag didn’t solve the problem for me.</p> <p>Stripping out height and width from the .svg code appears harmless and helps somewhat.</p> <p>I’m considering just using a FF conditional to serve .png…</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-317853-674661cb582ce' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=317853&origin=css-tricks.com&obj_id=45537868-317853-674661cb582ce' data-name='like-comment-frame-45537868-317853-674661cb582ce'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-297482"> <div class="comment-wrap" id="comment-297482"> <div class="comment-author-wrap"> <div class="comment-author">Justin</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297482"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T21:33:40-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>@Peter Foti – agreed, <code>'img[src$=".svg"]'</code> much better!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297482-674661cb58828' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297482&origin=css-tricks.com&obj_id=45537868-297482-674661cb58828' data-name='like-comment-frame-45537868-297482-674661cb58828'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-297532"> <div class="comment-wrap" id="comment-297532"> <div class="comment-author-wrap"> <div class="comment-author">Kyle</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297532"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-05T22:10:34-07:00">March 5, 2013</time></div> </div> <div class="comment-content"> <p>Humbled and proud to be a part of this article. Thank you, kind sir.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297532-674661cb58b96' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297532&origin=css-tricks.com&obj_id=45537868-297532-674661cb58b96' data-name='like-comment-frame-45537868-297532-674661cb58b96'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-297637"> <div class="comment-wrap" id="comment-297637"> <div class="comment-author-wrap"> <div class="comment-author">Philippe Michou</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297637"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T00:10:08-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>I had a messy experience <a href="http://philippemichou.fr/animated-scalable-vector-graphics/" rel="nofollow ugc">here</a> with inline svg and animation.<br /> I didn’t have time to optimise. It’s quite cute on FF; There’s so much to do with svg inline and css. Thanks for the good advices. (I use inkscape on linux)</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297637-674661cb58e9a' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297637&origin=css-tricks.com&obj_id=45537868-297637-674661cb58e9a' data-name='like-comment-frame-45537868-297637-674661cb58e9a'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-297639"> <div class="comment-wrap" id="comment-297639"> <div class="comment-author-wrap"> <div class="comment-author">Michael</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297639"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T00:14:32-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Very nice post, I have also created a post not long ago about SVGs and animation of them. You can find it here: <a href="http://nightlycoding.com/index.php/2012/10/animating-properties-of-injected-svg-elements-with-tweenmax/" rel="nofollow ugc">animating-properties-of-injected-svg-elements</a></p> <p>I think SVGs are terrific for multiple purposes but they are not getting the attention they deserve, especially in this new multi-screen era that we are experiencing, their scalability is life-saving.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297639-674661cb59139' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297639&origin=css-tricks.com&obj_id=45537868-297639-674661cb59139' data-name='like-comment-frame-45537868-297639-674661cb59139'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-297678"> <div class="comment-wrap" id="comment-297678"> <div class="comment-author-wrap"> <div class="comment-author">Dwoo</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297678"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T00:56:33-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>What kind of magic base64 encoder do you use to make it shrink?</p> <p>Base64 is larger than raw formats, including plain text.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297678-674661cb593c1' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297678&origin=css-tricks.com&obj_id=45537868-297678-674661cb593c1' data-name='like-comment-frame-45537868-297678-674661cb593c1'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-297690"> <div class="comment-wrap" id="comment-297690"> <div class="comment-author-wrap"> <div class="comment-author">Sergej Müller</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297690"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T01:01:55-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Thanks for tutorial. I use <a href="http://playground.ebiene.de/svg-bilder-komprimieren/" rel="nofollow ugc">SVGO GUI</a> for optimizing SVG vector graphics files.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297690-674661cb59662' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297690&origin=css-tricks.com&obj_id=45537868-297690-674661cb59662' data-name='like-comment-frame-45537868-297690-674661cb59662'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-297731"> <div class="comment-wrap" id="comment-297731"> <div class="comment-author-wrap"> <div class="comment-author">poselab</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297731"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T01:59:08-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>I prefer the <a href="http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique" rel="nofollow ugc">invisible gradient technique</a> as fallback for SVG</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297731-674661cb59925' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297731&origin=css-tricks.com&obj_id=45537868-297731-674661cb59925' data-name='like-comment-frame-45537868-297731-674661cb59925'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-297732"> <div class="comment-wrap" id="comment-297732"> <div class="comment-author-wrap"> <div class="comment-author">Dennis</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297732"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T02:00:39-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Fantastic information.</p> <p>For what it’s worth, here’s a a demo of a draggable and zoomable SVG:</p> <p><a href="http://www.cyberz.org/projects/SVGPan/tiger.svg" rel="nofollow ugc">http://www.cyberz.org/projects/SVGPan/tiger.svg</a></p> <p>source: <a href="http://www.cyberz.org/blog/" rel="nofollow ugc">http://www.cyberz.org/blog/</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297732-674661cb5a48b' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297732&origin=css-tricks.com&obj_id=45537868-297732-674661cb5a48b' data-name='like-comment-frame-45537868-297732-674661cb5a48b'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-297739"> <div class="comment-wrap" id="comment-297739"> <div class="comment-author-wrap"> <div class="comment-author">airoschou</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297739"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T02:13:38-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Wa, Nice post, I’v got something from here</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297739-674661cb5a90a' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297739&origin=css-tricks.com&obj_id=45537868-297739-674661cb5a90a' data-name='like-comment-frame-45537868-297739-674661cb5a90a'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-297771"> <div class="comment-wrap" id="comment-297771"> <div class="comment-author-wrap"> <div class="comment-author">David</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297771"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T03:05:30-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Excellent article.</p> <p>Just one remark. You say :</p> <blockquote><p> with both <img> and background-image […] you don’t get to control the innards of the SVG with CSS </p></blockquote> <p>It’s not true. You definitely can style them with CSS.<br /> You only have to use <style> element inside your svg<br /> (because not every browser support <?xml-stylesheet type=”text/css” href=”svg-stylesheet.css” ?> )</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297771-674661cb5ad08' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297771&origin=css-tricks.com&obj_id=45537868-297771-674661cb5ad08' data-name='like-comment-frame-45537868-297771-674661cb5ad08'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-297832"> <div class="comment-wrap" id="comment-297832"> <div class="comment-author-wrap"> <div class="comment-author">Robert D'Arcy</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297832"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T05:03:12-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>A very good article, although not comprehensive – it lacks information about using links inside an SVG as well as the possibilities for animation (although that would require an article all by itself).</p> <p>I have been meaning for a long time to use SVG in a website but for the moment I only use it to create procedural graphics, like Guilloche patterns, such as this example-</p> <p><a href="https://www.facebook.com/photo.php?fbid=4221355849819&l=4347ce6c71" rel="nofollow ugc">Guilloche experiment #1</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297832-674661cb5b04b' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297832&origin=css-tricks.com&obj_id=45537868-297832-674661cb5b04b' data-name='like-comment-frame-45537868-297832-674661cb5b04b'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-297870"> <div class="comment-wrap" id="comment-297870"> <div class="comment-author-wrap"> <div class="comment-author">James Nowland</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297870"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T05:48:27-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Really wish this post existed 6 months ago. Google used to return so many horrible adobe links from 2001 when you googled anything about SVG.</p> <p>SVG will only get bigger with all the high DPI devices coming out.</p> <p>Below is the sass/scss mixin I’ve used on lots of builds.</p> <pre><code> @mixin svg($img-name) { .svg .svg") no-repeat; } .no-svg .png") no-repeat; } } .logo { @include svg-logo('company-logo'); @extend %image-replace; height: 100px; width: 100px; } // Use % for silent classes %image-replace { display:block; overflow:hidden; text-indent:-9999em; } </code></pre> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297870-674661cb5b455' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297870&origin=css-tricks.com&obj_id=45537868-297870-674661cb5b455' data-name='like-comment-frame-45537868-297870-674661cb5b455'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-297884"> <div class="comment-wrap" id="comment-297884"> <div class="comment-author-wrap"> <div class="comment-author">Marcus</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297884"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T06:10:04-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Hi there!<br /> I just want to point out that SVG actually can be considered an application engine with vector graphics presentation built in, as you can script the document and css it very much like you do with HTML. SVG could be used instead of HTML if you want more low-level graphics primitives available in your main layout rather than the high level “document” semantics available in HTML (browsers probably need the SVG viewport be wrapped by the HTML tag though at the moment).</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297884-674661cb5b886' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297884&origin=css-tricks.com&obj_id=45537868-297884-674661cb5b886' data-name='like-comment-frame-45537868-297884-674661cb5b886'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-297923"> <div class="comment-wrap" id="comment-297923"> <div class="comment-author-wrap"> <div class="comment-author">Christian Krammer</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297923"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T07:21:46-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Wow, great article Chris. I just skimmed it, but will definitely dive into it soon.</p> <p>Just one quick note: If you have a SVG file, you don’t have to explicetly save it as “code”, an SVG file is per already “written in code”.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297923-674661cb5bbdc' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297923&origin=css-tricks.com&obj_id=45537868-297923-674661cb5bbdc' data-name='like-comment-frame-45537868-297923-674661cb5bbdc'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-297962"> <div class="comment-wrap" id="comment-297962"> <div class="comment-author-wrap"> <div class="comment-author">Pete B</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297962"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T07:55:40-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <blockquote><p> A way to shrink SVG’s even smaller is to convert them into Data URI’s. </p></blockquote> <p>One minor correction: base64 encoded svg for data-uri will always be <strong>more</strong> bytes than an un-encoded svg. I’m thinking the optimisation you’re thinking of is the http request you avoid by embedding?</p> <p>In theory you can get use un-encoded svg in data uri’s, but browser support is a bit flaky:</p> <p><a href="http://rod.vagg.org/2012/05/data-uri-svg/" rel="nofollow ugc">http://rod.vagg.org/2012/05/data-uri-svg/</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297962-674661cb5bfb6' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297962&origin=css-tricks.com&obj_id=45537868-297962-674661cb5bfb6' data-name='like-comment-frame-45537868-297962-674661cb5bfb6'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-297966"> <div class="comment-wrap" id="comment-297966"> <div class="comment-author-wrap"> <div class="comment-author">Brad S.</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-297966"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T07:59:29-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Fantastic article. It for this sort of stuff that I subscribe! Thanks :)</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-297966-674661cb5c3df' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=297966&origin=css-tricks.com&obj_id=45537868-297966-674661cb5c3df' data-name='like-comment-frame-45537868-297966-674661cb5c3df'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1 featured" id="li-comment-298014"> <div class="comment-wrap" id="comment-298014"> <div class="comment-author-wrap"> <div class="comment-author">Johnny Martin</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298014"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T08:54:14-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Check out this tip by Ben Schwarz:</p> <p><em>“All browsers that support SVG background images also supports multiple background images.”</em></p> <pre><code>.module { background: url('logo.png'); background: none, url('logo.svg'); } </code></pre> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298014-674661cb5c7da' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298014&origin=css-tricks.com&obj_id=45537868-298014-674661cb5c7da' data-name='like-comment-frame-45537868-298014-674661cb5c7da'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-298075"> <div class="comment-wrap" id="comment-298075"> <div class="comment-author-wrap"> <div class="comment-author">James Nowland</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298075"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T13:44:06-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Apparently Android 2.3 rains on that parade. I personally haven’t tested this.</p> <blockquote class="twitter-tweet" data-width="500" data-dnt="true"> <p lang="en" dir="ltr"><a href="https://twitter.com/smashingmag?ref_src=twsrc%5Etfw" rel="ugc">@smashingmag</a> Unfortunately won't work. Android 2.3 fails miserably. Supports multiple bg images but not SVG. Requests both, displays neither</p> <p>— Tim Kadlec (@tkadlec) <a href="https://twitter.com/tkadlec/status/306048885527298050?ref_src=twsrc%5Etfw" rel="ugc">February 25, 2013</a></p></blockquote> <p></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298075-674661cb5d2de' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298075&origin=css-tricks.com&obj_id=45537868-298075-674661cb5d2de' data-name='like-comment-frame-45537868-298075-674661cb5d2de'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt depth-2" id="li-comment-298079"> <div class="comment-wrap" id="comment-298079"> <div class="comment-author-wrap"> <div class="comment-author">Johnny Martin</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298079"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T13:46:36-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Good catch! Thanks for pointing that out.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298079-674661cb5d78e' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298079&origin=css-tricks.com&obj_id=45537868-298079-674661cb5d78e' data-name='like-comment-frame-45537868-298079-674661cb5d78e'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even depth-2" id="li-comment-597834"> <div class="comment-wrap" id="comment-597834"> <div class="comment-author-wrap"> <div class="comment-author">cimmanon</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-597834"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-10-18T09:39:06-06:00">October 18, 2013</time></div> </div> <div class="comment-content"> <p>All browsers that support SVG background images also support background-size unprefixed. IE8 doesn’t support SVG or background-size, Android 2.3 doesn’t support SVG but requires a prefix for background-size.</p> <pre><code>.foo { background: url(foo.png) no-repeat; background: url(foo.svg) left top / auto auto no-repeat; } </code></pre> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-597834-674661cb5db68' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=597834&origin=css-tricks.com&obj_id=45537868-597834-674661cb5db68' data-name='like-comment-frame-45537868-597834-674661cb5db68'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-298055"> <div class="comment-wrap" id="comment-298055"> <div class="comment-author-wrap"> <div class="comment-author">Steve Wanless</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298055"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T12:49:17-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Great image choice – a Kiwi isn’t just a fruit!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298055-674661cb5de9b' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298055&origin=css-tricks.com&obj_id=45537868-298055-674661cb5de9b' data-name='like-comment-frame-45537868-298055-674661cb5de9b'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-298067"> <div class="comment-wrap" id="comment-298067"> <div class="comment-author-wrap"> <div class="comment-author">strages</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298067"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T13:22:50-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>when using the optimize tool, always check for distortion in your svg output and also check if something is off..</p> <p>in my case it didn’t leave the id in for my linear gradient, which resulted in a pure color instead of a gradient :P</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298067-674661cb5e1dd' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298067&origin=css-tricks.com&obj_id=45537868-298067-674661cb5e1dd' data-name='like-comment-frame-45537868-298067-674661cb5e1dd'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-298081"> <div class="comment-wrap" id="comment-298081"> <div class="comment-author-wrap"> <div class="comment-author">Dragos Mocanu</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298081"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T13:53:12-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>SVG should be used more. Wikipedia is the only website that comes to mind that uses SVG on a regular basis</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298081-674661cb5e4da' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298081&origin=css-tricks.com&obj_id=45537868-298081-674661cb5e4da' data-name='like-comment-frame-45537868-298081-674661cb5e4da'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-304357"> <div class="comment-wrap" id="comment-304357"> <div class="comment-author-wrap"> <div class="comment-author">Ron Logan</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-304357"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-16T06:45:03-06:00">March 16, 2013</time></div> </div> <div class="comment-content"> <p>MSN on our IE10/Windows8 pages use an inline SVG for the header logo, and use CSS to change the color for the different channels rather than have a bunch of differently-colored PNGs.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-304357-674661cb5e798' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=304357&origin=css-tricks.com&obj_id=45537868-304357-674661cb5e798' data-name='like-comment-frame-45537868-304357-674661cb5e798'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-298091"> <div class="comment-wrap" id="comment-298091"> <div class="comment-author-wrap"> <div class="comment-author">Arshad Ansari</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298091"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T14:52:44-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Great Article! Actually have started using SVG just few days back so I am new at it. But the biggest advantage is that I can simply create vector graphics in software like Illustrator and use them as SVG in my designs. They are helping me reduce the size of my designs to a great extent.</p> <p>Thanks for sharing such a valuable information, really helping me a lot to better understand SVG</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298091-674661cb5ea3d' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298091&origin=css-tricks.com&obj_id=45537868-298091-674661cb5ea3d' data-name='like-comment-frame-45537868-298091-674661cb5ea3d'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-298095"> <div class="comment-wrap" id="comment-298095"> <div class="comment-author-wrap"> <div class="comment-author">Gregory Pakosz</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298095"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-06T15:34:02-07:00">March 6, 2013</time></div> </div> <div class="comment-content"> <p>Please note that as I tweeted you, SVG as background-image doesn’t play well in Opera: <a href="http://stackoverflow.com/questions/15220910/svg-as-css-background-problems-with-zoom-level-in-opera" rel="nofollow ugc">http://stackoverflow.com/questions/15220910/svg-as-css-background-problems-with-zoom-level-in-opera</a></p> <p>Also, as mentioned by caniuse.com, SVG-as-image is fuzzy/pixelated when zoomed or printed in all browsers but Chrome 23+ and IE9+ because the browsers first renders SVG into a bitmap then zooms that bitmap in instead of re-rendering when the zoom level changes</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298095-674661cb5ed1d' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298095&origin=css-tricks.com&obj_id=45537868-298095-674661cb5ed1d' data-name='like-comment-frame-45537868-298095-674661cb5ed1d'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-298396"> <div class="comment-wrap" id="comment-298396"> <div class="comment-author-wrap"> <div class="comment-author">HypeBuzz</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298396"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-07T03:26:28-07:00">March 7, 2013</time></div> </div> <div class="comment-content"> <p>This is amazing resource. I read a lot about SVG, but never used it on my projects. Will do in future for sure!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298396-674661cb5efdc' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298396&origin=css-tricks.com&obj_id=45537868-298396-674661cb5efdc' data-name='like-comment-frame-45537868-298396-674661cb5efdc'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-298424"> <div class="comment-wrap" id="comment-298424"> <div class="comment-author-wrap"> <div class="comment-author">Gavin</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298424"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-07T04:29:05-07:00">March 7, 2013</time></div> </div> <div class="comment-content"> <p>Hot Link Flat UI is not working.</p> <p>Sorry – didnt know where else to post this as there is no comment section on those links</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298424-674661cb5f256' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298424&origin=css-tricks.com&obj_id=45537868-298424-674661cb5f256' data-name='like-comment-frame-45537868-298424-674661cb5f256'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-298431"> <div class="comment-wrap" id="comment-298431"> <div class="comment-author-wrap"> <div class="comment-author">Eelco</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298431"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-07T04:52:10-07:00">March 7, 2013</time></div> </div> <div class="comment-content"> <p>Do I stand correct that you can’t style the svg when it’s base64 encoded within the css? Like in <a href="http://codepen.io/anon/pen/oFhzA" rel="nofollow ugc">http://codepen.io/anon/pen/oFhzA</a><br /> Codepen doesn’t seem to like the inline-image property, but you get the point.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298431-674661cb5f5a0' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298431&origin=css-tricks.com&obj_id=45537868-298431-674661cb5f5a0' data-name='like-comment-frame-45537868-298431-674661cb5f5a0'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-298444"> <div class="comment-wrap" id="comment-298444"> <div class="comment-author-wrap"> <div class="comment-author">Jeremy</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298444"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-07T05:24:05-07:00">March 7, 2013</time></div> </div> <div class="comment-content"> <p>How can you talk about SVG on the web and not mention <a href="http://raphaeljs.com/" rel="nofollow ugc">RaphaelJS</a>? Granted, it’s more about dynamically rendering SVG and interacting with it, but to quote their site:</p> <blockquote><p> Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.<br /> Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.<br /> Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+. </p></blockquote> <p>I’m pretty sure it has touch support (dragging) baked in. Check out the demos on their site.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298444-674661cb5f950' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298444&origin=css-tricks.com&obj_id=45537868-298444-674661cb5f950' data-name='like-comment-frame-45537868-298444-674661cb5f950'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-298453"> <div class="comment-wrap" id="comment-298453"> <div class="comment-author-wrap"> <div class="comment-author">Jeremy</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298453"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-07T05:35:00-07:00">March 7, 2013</time></div> </div> <div class="comment-content"> <p>And some good plugins:</p> <p><a href="https://github.com/ElbertF/Raphael.JSON" rel="nofollow ugc">export “instructions” as json</a><br /> <a href="https://github.com/ElbertF/Raphael.Export" rel="nofollow ugc">export “instructions” as actual SVG</a><br /> <a href="http://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser" rel="nofollow ugc">convert to PNG/JPG in browser with canvg</a> — this is super awesome for exporting; you can basically make your own image editor in the browser<br /> <a href="http://ianli.com/sketchpad/" rel="nofollow ugc">Example of a drawing app — Raphael SketchPad</a><br /> And if you find some polygon formulas, it makes it really easy to make complicated shapes (I’ve built something for hearts, stars, and triangles)</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298453-674661cb5fe53' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298453&origin=css-tricks.com&obj_id=45537868-298453-674661cb5fe53' data-name='like-comment-frame-45537868-298453-674661cb5fe53'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even depth-2" id="li-comment-298694"> <div class="comment-wrap" id="comment-298694"> <div class="comment-author-wrap"> <div class="comment-author">DarrenM</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298694"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-07T17:03:30-07:00">March 7, 2013</time></div> </div> <div class="comment-content"> <p>+1</p> <p>I’m using the Raphael library to handle SVG graphics on one of our sites. I understand it uses VML on IE platforms that don’t support SVG.</p> <p>I use it for custom charts, which were previously drawn using a graphics library on the server and streamed as images to the browser. Doing it with SVG has allowed me to interact with the charts in Javascript, for example I can highlight a plot on the chart when the user hovers over a name in the legend.</p> <p>The Raphael commands are embedded in the HTML, which makes the page size a bit larger than before, but it hasn’t affected page performance noticeably and the pages are now served with a single HTTP request instead of several.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298694-674661cb604c8' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298694&origin=css-tricks.com&obj_id=45537868-298694-674661cb604c8' data-name='like-comment-frame-45537868-298694-674661cb604c8'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-298469"> <div class="comment-wrap" id="comment-298469"> <div class="comment-author-wrap"> <div class="comment-author">David Goss</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298469"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-07T06:08:15-07:00">March 7, 2013</time></div> </div> <div class="comment-content"> <p>Nice article Chris.</p> <p>Recently I used SVG for a logo (as an <code><img></code> tag), and with essentially no users of that site on Android 2.3 I only had to worry about oldIE, which meant I was able to use conditional comments and avoid JavaScript altogether.</p> <p><a href="http://davidgoss.co.uk/2013/01/30/use-svg-for-your-logo-and-still-support-ie8-and-below/" rel="nofollow ugc">I wrote it up here</a>.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298469-674661cb6080e' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298469&origin=css-tricks.com&obj_id=45537868-298469-674661cb6080e' data-name='like-comment-frame-45537868-298469-674661cb6080e'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-298505"> <div class="comment-wrap" id="comment-298505"> <div class="comment-author-wrap"> <div class="comment-author">Daniel Bakan</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298505"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-07T07:43:02-07:00">March 7, 2013</time></div> </div> <div class="comment-content"> <p>This is awesome, Chris! Thanks a lot for putting all this together. Especially the combination of SVG and CSS opens so many opportunities. I’ll have to try some of this stuff myself! Thanks again</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298505-674661cb60b99' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298505&origin=css-tricks.com&obj_id=45537868-298505-674661cb60b99' data-name='like-comment-frame-45537868-298505-674661cb60b99'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-298535"> <div class="comment-wrap" id="comment-298535"> <div class="comment-author-wrap"> <div class="comment-author">Rachel Reveley</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298535"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-07T09:15:26-07:00">March 7, 2013</time></div> </div> <div class="comment-content"> <p>Great article. One other useful bit of knowledge. If you embed an SVG into LESS and probably also SASS you can set the fill colours using variables. This is very handy for me as I can use standard icons on several websites but each site sets it’s own colours.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298535-674661cb60e59' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298535&origin=css-tricks.com&obj_id=45537868-298535-674661cb60e59' data-name='like-comment-frame-45537868-298535-674661cb60e59'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-298550"> <div class="comment-wrap" id="comment-298550"> <div class="comment-author-wrap"> <div class="comment-author">Druid of Lûhn</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298550"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-07T10:11:36-07:00">March 7, 2013</time></div> </div> <div class="comment-content"> <p>This is easier more understandable base64 code (for the Terminal):</p> <p><code>openssl base64 -in kiwi.svg -out kiwi_64.txt</code></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298550-674661cb61193' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298550&origin=css-tricks.com&obj_id=45537868-298550-674661cb61193' data-name='like-comment-frame-45537868-298550-674661cb61193'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-298665"> <div class="comment-wrap" id="comment-298665"> <div class="comment-author-wrap"> <div class="comment-author">Ben</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298665"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-07T15:49:52-07:00">March 7, 2013</time></div> </div> <div class="comment-content"> <p>I added a couple of things to the inline SVG example to make it accessible:<br /> <a href="http://codepen.io/bensmithett/pen/oyqhc" rel="nofollow ugc">http://codepen.io/bensmithett/pen/oyqhc</a></p> <p>Super helpful article :)</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298665-674661cb61527' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298665&origin=css-tricks.com&obj_id=45537868-298665-674661cb61527' data-name='like-comment-frame-45537868-298665-674661cb61527'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-298722"> <div class="comment-wrap" id="comment-298722"> <div class="comment-author-wrap"> <div class="comment-author">Bechara</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298722"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-07T18:02:13-07:00">March 7, 2013</time></div> </div> <div class="comment-content"> <p>Although the SVG being sensational, I regret the fact that he was too slow to use it in games with JavaScript. I think we could do more with the SVG compared to the Canvas, but by its slowness, we have to resort to the canvas.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298722-674661cb617f5' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298722&origin=css-tricks.com&obj_id=45537868-298722-674661cb617f5' data-name='like-comment-frame-45537868-298722-674661cb617f5'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-298984"> <div class="comment-wrap" id="comment-298984"> <div class="comment-author-wrap"> <div class="comment-author">JohnMotylJr</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-298984"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-08T05:09:05-07:00">March 8, 2013</time></div> </div> <div class="comment-content"> <p>I opened this article thinking it would be a little explanation and some code snippets. However, my mind was officially blown from start to finish. Insanely good article, this one is totally getting a bookmark. Thank you Mr. Coyier for filling my brain with some more goodness.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-298984-674661cb61ac0' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=298984&origin=css-tricks.com&obj_id=45537868-298984-674661cb61ac0' data-name='like-comment-frame-45537868-298984-674661cb61ac0'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-299017"> <div class="comment-wrap" id="comment-299017"> <div class="comment-author-wrap"> <div class="comment-author">Inder Singh Ishwerdas</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-299017"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-08T06:54:29-07:00">March 8, 2013</time></div> </div> <div class="comment-content"> <p>That’s a pretty comprehensive article on SVG, I loved it. Saving it for later. I am also really confused between all the SVG vs Canvas stuff in the context of web gaming.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-299017-674661cb61dc2' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=299017&origin=css-tricks.com&obj_id=45537868-299017-674661cb61dc2' data-name='like-comment-frame-45537868-299017-674661cb61dc2'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-299056"> <div class="comment-wrap" id="comment-299056"> <div class="comment-author-wrap"> <div class="comment-author">www.codedcontainer.com</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-299056"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-08T08:33:19-07:00">March 8, 2013</time></div> </div> <div class="comment-content"> <p>This is the first time I have heard about this. More people should know about this. I am definitely tweeting this one! I will have to bookmark this and create SVG’s when I have the time.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-299056-674661cb62129' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=299056&origin=css-tricks.com&obj_id=45537868-299056-674661cb62129' data-name='like-comment-frame-45537868-299056-674661cb62129'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-299611"> <div class="comment-wrap" id="comment-299611"> <div class="comment-author-wrap"> <div class="comment-author">Peter Dmitrienko</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-299611"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-09T08:06:06-07:00">March 9, 2013</time></div> </div> <div class="comment-content"> <p>Amazing, Thanks a lot.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-299611-674661cb62459' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=299611&origin=css-tricks.com&obj_id=45537868-299611-674661cb62459' data-name='like-comment-frame-45537868-299611-674661cb62459'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-299731"> <div class="comment-wrap" id="comment-299731"> <div class="comment-author-wrap"> <div class="comment-author">James</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-299731"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-09T12:14:55-07:00">March 9, 2013</time></div> </div> <div class="comment-content"> <p>Wow! Definitely the best article i’ve come across regarding SVG’s.</p> <p>I am going to use this format for a website logo. For semantics, would it better to do it in the HTML as an IMG tag and suffer the additional HTTP request, as opposed to doing it via CSS?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-299731-674661cb6277b' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=299731&origin=css-tricks.com&obj_id=45537868-299731-674661cb6277b' data-name='like-comment-frame-45537868-299731-674661cb6277b'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment byuser comment-author-fotimangmail-com even depth-2" id="li-comment-299875"> <div class="comment-wrap" id="comment-299875"> <div class="comment-author-wrap"> <div class="comment-author">Fotiman</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-299875"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-09T17:55:35-07:00">March 9, 2013</time></div> </div> <div class="comment-content"> <p>If you consider it part of the content, then it deserves an img tag. If you think it is presentation only, then make it a background image via CSS.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-299875-674661cb63a0b' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=299875&origin=css-tricks.com&obj_id=45537868-299875-674661cb63a0b' data-name='like-comment-frame-45537868-299875-674661cb63a0b'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt depth-2" id="li-comment-300133"> <div class="comment-wrap" id="comment-300133"> <div class="comment-author-wrap"> <div class="comment-author">James</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-300133"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-10T05:46:47-06:00">March 10, 2013</time></div> </div> <div class="comment-content"> <p>Well I am pretty certain the main logo of a website is content, and not presentation. So using an IMG tag would be best practice. My question in this instance was semantics vs performance.</p> <p>I am now thinking about the last technique Chris talks about, using base64 in the IMG tag, along with an ‘alt’ tag</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-300133-674661cb63ebe' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=300133&origin=css-tricks.com&obj_id=45537868-300133-674661cb63ebe' data-name='like-comment-frame-45537868-300133-674661cb63ebe'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-300299"> <div class="comment-wrap" id="comment-300299"> <div class="comment-author-wrap"> <div class="comment-author">C and P Unlock</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-300299"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-10T13:54:14-06:00">March 10, 2013</time></div> </div> <div class="comment-content"> <p>Wow I did not realize you could get the straight SVG from illustrator. great feature!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-300299-674661cb643b2' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=300299&origin=css-tricks.com&obj_id=45537868-300299-674661cb643b2' data-name='like-comment-frame-45537868-300299-674661cb643b2'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-300414"> <div class="comment-wrap" id="comment-300414"> <div class="comment-author-wrap"> <div class="comment-author">Mike</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-300414"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-10T17:30:23-06:00">March 10, 2013</time></div> </div> <div class="comment-content"> <p>Hello!<br /> in our app for android made with html5 +backbone + phonegap we decided to use svg for some illustration. This decision is giving me now some really hard times. The svg i’m trying to embed are not basic svg.<br /> I managed to add the dropshadow as a filter directly into the svg. The cool thing is that it renders well into any of the browser I used in the android device. But when you open the app created from the same html5 with phonegap and run into the same device the dropshadow filter is not rendered. I’m using for testing a HTC one X with the latest android distribution.</p> <p>Does anyone has an idea why phonegap seems to strip filters from the svg? I’ve tried to look on the web for this issue but got no clue…yet</p> <p>thanks</p> <p>Mike</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-300414-674661cb648a8' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=300414&origin=css-tricks.com&obj_id=45537868-300414-674661cb648a8' data-name='like-comment-frame-45537868-300414-674661cb648a8'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-300893"> <div class="comment-wrap" id="comment-300893"> <div class="comment-author-wrap"> <div class="comment-author">Cubicle Ninjas</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-300893"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-11T08:07:49-06:00">March 11, 2013</time></div> </div> <div class="comment-content"> <p>Thanks for the overview Chris! A lot of things in here that I did not realize were possible!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-300893-674661cb64da0' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=300893&origin=css-tricks.com&obj_id=45537868-300893-674661cb64da0' data-name='like-comment-frame-45537868-300893-674661cb64da0'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-300926"> <div class="comment-wrap" id="comment-300926"> <div class="comment-author-wrap"> <div class="comment-author">cnwtx</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-300926"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-11T08:50:19-06:00">March 11, 2013</time></div> </div> <div class="comment-content"> <p>You can also use php to generate data-urls on the fly. For example:</p> <pre><code> function data_url($file, $mime) { $contents=file_get_contents($file); $base64=base64_encode($contents); echo("data:$mime;base64,$base64"); } </code></pre> <p>The call it with this:</p> <pre><code> data_url('./images/image.svg', 'image/svg+xml'); </code></pre> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-300926-674661cb652fe' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=300926&origin=css-tricks.com&obj_id=45537868-300926-674661cb652fe' data-name='like-comment-frame-45537868-300926-674661cb652fe'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-300957"> <div class="comment-wrap" id="comment-300957"> <div class="comment-author-wrap"> <div class="comment-author">Roman</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-300957"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-11T09:42:26-06:00">March 11, 2013</time></div> </div> <div class="comment-content"> <p>Okay, I am still not clear about what format of SVG to use. For example, for animating with CSS3, which method is the best? Also, for making responsive graphics (like logos) which one is the best? I have seen many people suggesting different things but there should be at least one that works well for styling and manipulating with CSS…</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-300957-674661cb657e2' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=300957&origin=css-tricks.com&obj_id=45537868-300957-674661cb657e2' data-name='like-comment-frame-45537868-300957-674661cb657e2'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-301323"> <div class="comment-wrap" id="comment-301323"> <div class="comment-author-wrap"> <div class="comment-author">Ben</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-301323"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-11T17:45:57-06:00">March 11, 2013</time></div> </div> <div class="comment-content"> <p>Just discovered one caveat when styling the <code>fill</code> property with CSS – you need to remove any hardcoded <code>fill</code> attribute that Illustrator exports.</p> <p>Eg</p> <p><code><svg class="foo"><g fill="#FFF700"><path... /></g></svg></code></p> <p>won’t have its <code>fill</code> attribute overridden by</p> <p><code>.foo {<br /> fill: #bada55;<br /> }</code></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-301323-674661cb65cea' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=301323&origin=css-tricks.com&obj_id=45537868-301323-674661cb65cea' data-name='like-comment-frame-45537868-301323-674661cb65cea'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-305913"> <div class="comment-wrap" id="comment-305913"> <div class="comment-author-wrap"> <div class="comment-author">Gareth</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-305913"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-18T10:13:41-06:00">March 18, 2013</time></div> </div> <div class="comment-content"> <p>If you target the svg element that has the fill property it overrides hard coded attributes. i.e. change to</p> <pre><code>.foo g { fill: #bada55; } </code></pre> <p>.foo path { would also work.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-305913-674661cb661d1' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=305913&origin=css-tricks.com&obj_id=45537868-305913-674661cb661d1' data-name='like-comment-frame-45537868-305913-674661cb661d1'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-302127"> <div class="comment-wrap" id="comment-302127"> <div class="comment-author-wrap"> <div class="comment-author">Ste Allan</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-302127"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-12T16:18:21-06:00">March 12, 2013</time></div> </div> <div class="comment-content"> <p>In order to use SVGs you’ll need to make sure that your server has the correct MIME type set to serve that file type: “image/svg+xml”.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-302127-674661cb66683' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=302127&origin=css-tricks.com&obj_id=45537868-302127-674661cb66683' data-name='like-comment-frame-45537868-302127-674661cb66683'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-302628"> <div class="comment-wrap" id="comment-302628"> <div class="comment-author-wrap"> <div class="comment-author">Rob</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-302628"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-13T08:11:17-06:00">March 13, 2013</time></div> </div> <div class="comment-content"> <p>Thanks for this great writeup on good practices for using SVG on your website.</p> <p>Incase you are struggling to get the SVG to display on your page, an easy fix is to modify the AddType in your HTACCESS file.</p> <p>Add this towards the top of your HTACCESS:</p> <pre> <code> AddType image/svg+xml svg AddType image/svg+xml svgz AddEncoding x-gzip .svgz </code> </pre> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-302628-674661cb66ba2' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=302628&origin=css-tricks.com&obj_id=45537868-302628-674661cb66ba2' data-name='like-comment-frame-45537868-302628-674661cb66ba2'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-1443834"> <div class="comment-wrap" id="comment-1443834"> <div class="comment-author-wrap"> <div class="comment-author">Joe</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1443834"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-03-25T19:19:37-06:00">March 25, 2014</time></div> </div> <div class="comment-content"> <p>Thank you! This was driving me nuts. I mistakenly assumed that my host had this by default.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1443834-674661cb67067' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1443834&origin=css-tricks.com&obj_id=45537868-1443834-674661cb67067' data-name='like-comment-frame-45537868-1443834-674661cb67067'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-303052"> <div class="comment-wrap" id="comment-303052"> <div class="comment-author-wrap"> <div class="comment-author">Morfioce</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-303052"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-14T01:34:38-06:00">March 14, 2013</time></div> </div> <div class="comment-content"> <p>Chris you are awesome !</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-303052-674661cb67445' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=303052&origin=css-tricks.com&obj_id=45537868-303052-674661cb67445' data-name='like-comment-frame-45537868-303052-674661cb67445'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-303193"> <div class="comment-wrap" id="comment-303193"> <div class="comment-author-wrap"> <div class="comment-author">Shabir Gilkar</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-303193"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-14T08:47:20-06:00">March 14, 2013</time></div> </div> <div class="comment-content"> <p>Awesome always :)</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-303193-674661cb6789a' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=303193&origin=css-tricks.com&obj_id=45537868-303193-674661cb6789a' data-name='like-comment-frame-45537868-303193-674661cb6789a'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-304976"> <div class="comment-wrap" id="comment-304976"> <div class="comment-author-wrap"> <div class="comment-author">Sven</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-304976"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-17T16:14:28-06:00">March 17, 2013</time></div> </div> <div class="comment-content"> <p>I currently wrote about SVG Stacking as a replacement for CSS Sprites. Therefore each icon is stored in the same SVG file but within its own layer:<br /> » <a href="http://hofmannsven.com/2013/laboratory/svg-stacking/" title="http://hofmannsven.com/2013/laboratory/svg-stacking/" rel="nofollow ugc">http://hofmannsven.com/2013/laboratory/svg-stacking/</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-304976-674661cb67db2' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=304976&origin=css-tricks.com&obj_id=45537868-304976-674661cb67db2' data-name='like-comment-frame-45537868-304976-674661cb67db2'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-305932"> <div class="comment-wrap" id="comment-305932"> <div class="comment-author-wrap"> <div class="comment-author">Richard Bagnall</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-305932"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-18T10:37:10-06:00">March 18, 2013</time></div> </div> <div class="comment-content"> <p>Such a shame you have to embed the SVG XML in a page to style it, it would have been so powerful to have multiple instances in a page and style them differently based on their context.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-305932-674661cb6829c' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=305932&origin=css-tricks.com&obj_id=45537868-305932-674661cb6829c' data-name='like-comment-frame-45537868-305932-674661cb6829c'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-310139"> <div class="comment-wrap" id="comment-310139"> <div class="comment-author-wrap"> <div class="comment-author">Nate</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-310139"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-20T06:01:37-06:00">March 20, 2013</time></div> </div> <div class="comment-content"> <p>I’ve started playing with the <a href="http://raphaeljs.com" rel="nofollow ugc">Raphaël</a> JavaScript Library. It’s pretty and seems powerful. From the site:</p> <blockquote> <p>Raphaël [‘ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.</p> <p>Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.</p> </blockquote> <p>It’s well documented on the site but is sparse on tutorials on the web.<br/><br /> Does anyone have experience w/ it?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-310139-674661cb687b3' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=310139&origin=css-tricks.com&obj_id=45537868-310139-674661cb687b3' data-name='like-comment-frame-45537868-310139-674661cb687b3'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-321800"> <div class="comment-wrap" id="comment-321800"> <div class="comment-author-wrap"> <div class="comment-author">Jeremy</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-321800"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-27T06:12:02-06:00">March 27, 2013</time></div> </div> <div class="comment-content"> <p>Yes — <a href="https://css-tricks.com/using-svg/#comment-298444" rel="nofollow ugc">as I mentioned</a> and <a href="https://css-tricks.com/using-svg/#comment-298694" rel="nofollow ugc">this guy replied</a>. Some of the included examples in their documentation are hard to follow, but most everything you need is there. Drop a line with questions.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-321800-674661cb68cd4' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=321800&origin=css-tricks.com&obj_id=45537868-321800-674661cb68cd4' data-name='like-comment-frame-45537868-321800-674661cb68cd4'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-312625"> <div class="comment-wrap" id="comment-312625"> <div class="comment-author-wrap"> <div class="comment-author">Scott Lyttle</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-312625"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-21T22:50:32-06:00">March 21, 2013</time></div> </div> <div class="comment-content"> <p>Keen to know if anyone else has come across the same issue I am having with a site I’m building.<br /> I am testing the site in Chrome (latest version). Modernizer returns support for svg and I can directly access the svg file in the browser (displays fine) but it just won’t show up on the page. In all instances the svg’s are set as background images in the CSS.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-312625-674661cb69154' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=312625&origin=css-tricks.com&obj_id=45537868-312625-674661cb69154' data-name='like-comment-frame-45537868-312625-674661cb69154'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-312740"> <div class="comment-wrap" id="comment-312740"> <div class="comment-author-wrap"> <div class="comment-author">Michael</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-312740"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-22T00:52:15-06:00">March 22, 2013</time></div> </div> <div class="comment-content"> <p>I have used this for js detection of svg support.</p> <p><code><br /> /* simple SVG image support detection */</p> <p>if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) {<br /> document.documentElement.className = "svg";<br /> }<br /> </code></p> <p>with this in css</p> <p><code><br /> #content {background-image: url(images/logo4.gif);}</p> <p>html.svg #content {background-image: url(images/logo4.svg);}<br /> </code></p> <p>thanks to this site for the info on svg use.<br /> <a href="http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images" rel="nofollow ugc">http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-312740-674661cb69e38' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=312740&origin=css-tricks.com&obj_id=45537868-312740-674661cb69e38' data-name='like-comment-frame-45537868-312740-674661cb69e38'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-313855"> <div class="comment-wrap" id="comment-313855"> <div class="comment-author-wrap"> <div class="comment-author">curtisblackwell</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-313855"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-23T00:31:43-06:00">March 23, 2013</time></div> </div> <div class="comment-content"> <p>made a <a href="https://github.com/curtisblackwell/base64_to_clipboard_sh" rel="nofollow ugc">bash script</a> to simplify the base64 option Mathias Bynens authored.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-313855-674661cb6a45f' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=313855&origin=css-tricks.com&obj_id=45537868-313855-674661cb6a45f' data-name='like-comment-frame-45537868-313855-674661cb6a45f'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-315729"> <div class="comment-wrap" id="comment-315729"> <div class="comment-author-wrap"> <div class="comment-author">Rudie</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-315729"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-24T16:19:52-06:00">March 24, 2013</time></div> </div> <div class="comment-content"> <p>“inability to cache”? Inline SVG is just part of the HTML document, isn’t it? So if the document is being cached, the inline SVG is being cached too? I don’t get it.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-315729-674661cb6aa21' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=315729&origin=css-tricks.com&obj_id=45537868-315729-674661cb6aa21' data-name='like-comment-frame-45537868-315729-674661cb6aa21'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment byuser comment-author-chriscoyier bypostauthor even depth-2" id="li-comment-315740"> <div class="comment-wrap" id="comment-315740"> <div class="comment-author-wrap"> <div class="comment-author">Chris Coyier</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-315740"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-24T16:27:01-06:00">March 24, 2013</time></div> </div> <div class="comment-content"> <p>Right but you probably don’t cache the HTML very hard, if at all. For instance, the cached HTML of this very page is being invalidated right now because I’m adding this comment.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-315740-674661cb6b058' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=315740&origin=css-tricks.com&obj_id=45537868-315740-674661cb6b058' data-name='like-comment-frame-45537868-315740-674661cb6b058'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-317727"> <div class="comment-wrap" id="comment-317727"> <div class="comment-author-wrap"> <div class="comment-author">Karl Kelman</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-317727"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-25T11:19:11-06:00">March 25, 2013</time></div> </div> <div class="comment-content"> <p>Downloading free or stock vector art from the web, I often couldn’t get it to display. It seems some browsers don’t like the “inkscape:” and “sodipodi:” prefixes in the code that appear in many SVG images. For me, it seemed that if opened the file in a text editor and deleted those phrases, it worked fine.</p> <p>Good tip on the blur in Firefox. Most of my images look fine in Firefox, so I stopped looking carefully at each one in FF, but there are a few that scaled up images that look bad.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-317727-674661cb6b52b' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=317727&origin=css-tricks.com&obj_id=45537868-317727-674661cb6b52b' data-name='like-comment-frame-45537868-317727-674661cb6b52b'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-317870"> <div class="comment-wrap" id="comment-317870"> <div class="comment-author-wrap"> <div class="comment-author">airtonix</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-317870"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-25T13:53:10-06:00">March 25, 2013</time></div> </div> <div class="comment-content"> <p>Reading this has brought back bad memories of php… Such an annoying language, the verbose requirements of semi-colons…. even in templates.</p> <p>Working with Django is so much easier.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-317870-674661cb6b96f' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=317870&origin=css-tricks.com&obj_id=45537868-317870-674661cb6b96f' data-name='like-comment-frame-45537868-317870-674661cb6b96f'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-317874"> <div class="comment-wrap" id="comment-317874"> <div class="comment-author-wrap"> <div class="comment-author">airtonix</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-317874"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-25T13:57:03-06:00">March 25, 2013</time></div> </div> <div class="comment-content"> <p>@Chris Coyler if your page cache is being invalidated by simple changes like comments, then you need to look at using a better templating system.</p> <p>Django has the concept of Application Level Cache, Whole Page Cache and Block Level Cache: <a href="https://docs.djangoproject.com/en/dev/topics/cache/" rel="nofollow ugc">https://docs.djangoproject.com/en/dev/topics/cache/</a></p> <p>In the scenario you describe, I’d be wrapping the SVG include inside a block level cache that is only invalidated if the svg were updated (assuming it’s pulled from a ORM query).</p> <p>Surely the php goblins have something similar?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-317874-674661cb6be12' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=317874&origin=css-tricks.com&obj_id=45537868-317874-674661cb6be12' data-name='like-comment-frame-45537868-317874-674661cb6be12'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-321775"> <div class="comment-wrap" id="comment-321775"> <div class="comment-author-wrap"> <div class="comment-author">Jeremy</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-321775"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-03-27T06:07:10-06:00">March 27, 2013</time></div> </div> <div class="comment-content"> <p>Uh… he’s talking about client-side page caching — literally, if the HTML has changed it’s a “new” page. Nothing to do with your language of choice.</p> <p>Possible workaround would be ajaxing in truly dynamic content like the comments, but then you have to jump through crawler hoops to index it.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-321775-674661cb6c2ac' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=321775&origin=css-tricks.com&obj_id=45537868-321775-674661cb6c2ac' data-name='like-comment-frame-45537868-321775-674661cb6c2ac'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-343488"> <div class="comment-wrap" id="comment-343488"> <div class="comment-author-wrap"> <div class="comment-author">Johan Hernández</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-343488"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-04-03T10:20:23-06:00">April 3, 2013</time></div> </div> <div class="comment-content"> <p>Hi, I just used (based on a video of teamtreehouse with a correction in conditional comments by Ian Lunn) a svg as a logo with conditional comments as a fallback to a png… here is the code:</p> <pre><code> <object data="img/logo.svg" type="image/svg+xml"> <a href="img/logo.svg">  </a> </objetct> </code></pre> <p>It works just great! and to add a link you can follow this easy example found on fiddle (no js)</p> <p><a href="http://jsfiddle.net/WEbGd/" rel="nofollow ugc">http://jsfiddle.net/WEbGd/</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-343488-674661cb6d1f1' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=343488&origin=css-tricks.com&obj_id=45537868-343488-674661cb6d1f1' data-name='like-comment-frame-45537868-343488-674661cb6d1f1'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-343543"> <div class="comment-wrap" id="comment-343543"> <div class="comment-author-wrap"> <div class="comment-author">Johan Hernández</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-343543"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-04-03T11:22:46-06:00">April 3, 2013</time></div> </div> <div class="comment-content"> <p>Sorry, in the closing object there is a mistake… it’s object and no objetct. :D</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-343543-674661cb6d6f0' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=343543&origin=css-tricks.com&obj_id=45537868-343543-674661cb6d6f0' data-name='like-comment-frame-45537868-343543-674661cb6d6f0'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-343574"> <div class="comment-wrap" id="comment-343574"> <div class="comment-author-wrap"> <div class="comment-author">Jad Joubran</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-343574"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-04-03T11:45:20-06:00">April 3, 2013</time></div> </div> <div class="comment-content"> <p>Raphael is a very necessary library when working with SVG! Cool article though, thanks</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-343574-674661cb6dae6' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=343574&origin=css-tricks.com&obj_id=45537868-343574-674661cb6dae6' data-name='like-comment-frame-45537868-343574-674661cb6dae6'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-373671"> <div class="comment-wrap" id="comment-373671"> <div class="comment-author-wrap"> <div class="comment-author">nitro</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-373671"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-04-14T07:16:01-06:00">April 14, 2013</time></div> </div> <div class="comment-content"> <p>For IE7 – 8 and crossbrowers there is<br /> <a href="http://www.pep-site.fr/logo_html5.php" rel="nofollow ugc">http://www.pep-site.fr/logo_html5.php</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-373671-674661cb6ec9a' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=373671&origin=css-tricks.com&obj_id=45537868-373671-674661cb6ec9a' data-name='like-comment-frame-45537868-373671-674661cb6ec9a'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-380920"> <div class="comment-wrap" id="comment-380920"> <div class="comment-author-wrap"> <div class="comment-author">Costa</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-380920"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-04-16T09:38:49-06:00">April 16, 2013</time></div> </div> <div class="comment-content"> <p>Strange I’m not able to resize my svg’s with css in IE9. The SVG’s have viewports, widths and heights, they just don’t seem to be responding to css rules. There are (or should be, in IE9) svgs in the top right corner of each of the 6 white panels <a href="http://ingenious.nodejitsu.com" rel="nofollow ugc">here</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-380920-674661cb6f18c' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=380920&origin=css-tricks.com&obj_id=45537868-380920-674661cb6f18c' data-name='like-comment-frame-45537868-380920-674661cb6f18c'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-380994"> <div class="comment-wrap" id="comment-380994"> <div class="comment-author-wrap"> <div class="comment-author">Karl Kelman</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-380994"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-04-16T10:29:12-06:00">April 16, 2013</time></div> </div> <div class="comment-content"> <p>Replace:</p> <p>svg width=”640″ height=”480″ version=”1.1″ baseProfile=”full” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” xmlns:ev=”http://www.w3.org/2001/xml-events”</p> <p>With:</p> <p>svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”<br /> viewBox=”0 0 640 480″ enable-background=”new 0 0 640 480″ xml:space=”preserve”</p> <p>And it should work just fine. I’ve experienced scaling problems with using width and height attributes in svg, and never seem to have problems just eliminating them.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-380994-674661cb6f570' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=380994&origin=css-tricks.com&obj_id=45537868-380994-674661cb6f570' data-name='like-comment-frame-45537868-380994-674661cb6f570'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt depth-2" id="li-comment-381073"> <div class="comment-wrap" id="comment-381073"> <div class="comment-author-wrap"> <div class="comment-author">Costa</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-381073"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-04-16T11:17:49-06:00">April 16, 2013</time></div> </div> <div class="comment-content"> <p>You rock! My viewport was missing!! No more coding at 3am. Thanks so much for catching that, I could have sworn I had one in there. So, for IE9 there seems to be good reason to include a height and width, check out this <a href="http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/" rel="nofollow ugc">blog post</a>.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-381073-674661cb6fb31' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=381073&origin=css-tricks.com&obj_id=45537868-381073-674661cb6fb31' data-name='like-comment-frame-45537868-381073-674661cb6fb31'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even depth-2" id="li-comment-381148"> <div class="comment-wrap" id="comment-381148"> <div class="comment-author-wrap"> <div class="comment-author">Karl Kelman</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-381148"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-04-16T11:59:15-06:00">April 16, 2013</time></div> </div> <div class="comment-content"> <p>I can’t seem to replicate the problems that seowarp.com experienced by omitting the height and width attributes. I’ve used .svg images very extensively on several sites (Responsively resizing with rem) and they all have the proper aspect ratio in cross-browser testing. Whenever I’ve noticed an image with a bad aspect ratio, it always has a height and width in the .svg code I forgot to delete. I always define height and width with CSS and omit them from the .svg itself; I noticed that you’ve only defined width on your site.</p> <p>I’m certainly not an expert… …curious what the actual right way to do this is.</p> <p>What do the other tricksters think?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-381148-674661cb6fe5e' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=381148&origin=css-tricks.com&obj_id=45537868-381148-674661cb6fe5e' data-name='like-comment-frame-45537868-381148-674661cb6fe5e'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt depth-2" id="li-comment-420118"> <div class="comment-wrap" id="comment-420118"> <div class="comment-author-wrap"> <div class="comment-author">Karl Kelman</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-420118"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-04-25T07:00:41-06:00">April 25, 2013</time></div> </div> <div class="comment-content"> <p>After some further unintentional science, I seem to experience occasional problems using .svg as a background image with height and width, which are fixed by deleting height and width within the .svg and only using css to scale the image. Confusingly, I can experience problems by omitting the height and width within the .svg if I use an .img tag to embed the image.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-420118-674661cb700c3' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=420118&origin=css-tricks.com&obj_id=45537868-420118-674661cb700c3' data-name='like-comment-frame-45537868-420118-674661cb700c3'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-382980"> <div class="comment-wrap" id="comment-382980"> <div class="comment-author-wrap"> <div class="comment-author">Graham</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-382980"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-04-17T05:13:41-06:00">April 17, 2013</time></div> </div> <div class="comment-content"> <p>Hi, I’ve found you can also use @import within the svg document to load an external CSS file.</p> <pre> <code> <svg> <style type="text/css"> @import "external.css"; </style> </svg> </code> </pre> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-382980-674661cb70371' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=382980&origin=css-tricks.com&obj_id=45537868-382980-674661cb70371' data-name='like-comment-frame-45537868-382980-674661cb70371'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-419804"> <div class="comment-wrap" id="comment-419804"> <div class="comment-author-wrap"> <div class="comment-author">Christian Krammer</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-419804"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-04-25T05:14:05-06:00">April 25, 2013</time></div> </div> <div class="comment-content"> <p>Thank you for your detailed coverage of SVG images, Chris. It was very helpful for me, since we plan to use it in some Apps (Webkit only). Therefore we also don’t need to worry about fallbacks or incompatibility.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-419804-674661cb70661' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=419804&origin=css-tricks.com&obj_id=45537868-419804-674661cb70661' data-name='like-comment-frame-45537868-419804-674661cb70661'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-425040"> <div class="comment-wrap" id="comment-425040"> <div class="comment-author-wrap"> <div class="comment-author">Mike Buttery</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-425040"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-04-29T07:34:14-06:00">April 29, 2013</time></div> </div> <div class="comment-content"> <p>Firstly Chris, a massive thank you for the write up. I gained a huge amount of knowledge.<br/><br/>I did come across one ‘issue’ that maybe worth mentioning as I couldn’t find anything mentioning it. Using the <object> tag and a Data URI (To get around Chrome’s CORS issue, as I wanted access to elements inside the SVG), Chrome seems to lose the ability to render any gradients.<br/><br/>Example here: <a href="http://jsfiddle.net/mikedidthis/rXJXq/1/<br/><br/>I" rel="nofollow ugc">http://jsfiddle.net/mikedidthis/rXJXq/1/<br/><br/>I</a> don’t think I missed anything. :(</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-425040-674661cb70ad4' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=425040&origin=css-tricks.com&obj_id=45537868-425040-674661cb70ad4' data-name='like-comment-frame-45537868-425040-674661cb70ad4'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-578073"> <div class="comment-wrap" id="comment-578073"> <div class="comment-author-wrap"> <div class="comment-author">Fab</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-578073"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-10-08T01:36:31-06:00">October 8, 2013</time></div> </div> <div class="comment-content"> <p>Hi, great article indeed, I’m just having only one problem:</p> <p>I have my SVG base64 encoded using Mobilefish.com service, but sometimes I have an error on Chrome that says: ERROR 414 – URI too long.</p> <p>I think it depends from my webserver, but I have to push my stuff on prod and I have to be sure that I won’t have that error<br /> Do you have any idea/suggestion on how can I “fix” this problem?</p> <p>Thanks in advance.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-578073-674661cb70ef9' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=578073&origin=css-tricks.com&obj_id=45537868-578073-674661cb70ef9' data-name='like-comment-frame-45537868-578073-674661cb70ef9'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment even depth-2" id="li-comment-592124"> <div class="comment-wrap" id="comment-592124"> <div class="comment-author-wrap"> <div class="comment-author">Fab</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-592124"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-10-15T05:13:50-06:00">October 15, 2013</time></div> </div> <div class="comment-content"> <p>Any one has been facing the same problem with base64 svg data URI?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-592124-674661cb712ac' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=592124&origin=css-tricks.com&obj_id=45537868-592124-674661cb712ac' data-name='like-comment-frame-45537868-592124-674661cb712ac'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-580880"> <div class="comment-wrap" id="comment-580880"> <div class="comment-author-wrap"> <div class="comment-author">lucideer</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-580880"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-10-09T08:45:03-06:00">October 9, 2013</time></div> </div> <div class="comment-content"> <p>One extra trick for the list, purely for completeness if nothing else. Similar to the <code><object/></code> method with the addition that it also supports CSS (I think … maybe).</p> <pre><code><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <use xlink:href="kiwi.svg#Layer_1" /> </svg> </code></pre> <p>Seemingly no IE support at all however.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-580880-674661cb715a6' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=580880&origin=css-tricks.com&obj_id=45537868-580880-674661cb715a6' data-name='like-comment-frame-45537868-580880-674661cb715a6'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1 buried" id="li-comment-591780"> <div class="comment-wrap" id="comment-591780"> <div class="comment-author-wrap"> <div class="comment-author">christian</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-591780"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-10-15T01:12:40-06:00">October 15, 2013</time></div> </div> <div class="comment-content"> <p>Chris, Pretend a whole bag of peanut m&ms was modern day currency for $100. Then pretend I knew your address. I would send you a bag of peanut m&ms in a heartbeat my friend! How you write—articulating in easy-to-understand language—is balm to my soul. I’ve been scouring the internet trying to learn to use svgs for the first time. I almost got scared away. Gosh. Talk about confusing. Then I found this gem, hours later… Man, remember that bag of m&ms? Yeah. I meant it! Thank you so much man!!!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-591780-674661cb71937' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=591780&origin=css-tricks.com&obj_id=45537868-591780-674661cb71937' data-name='like-comment-frame-45537868-591780-674661cb71937'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-607296"> <div class="comment-wrap" id="comment-607296"> <div class="comment-author-wrap"> <div class="comment-author">Scott Grodberg</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-607296"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-10-23T11:03:40-06:00">October 23, 2013</time></div> </div> <div class="comment-content"> <p>Nice one Chris, already started using it for a client. Very good writeup, maybe better than MDN as far as practicality goes. Thanks again!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-607296-674661cb71ca3' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=607296&origin=css-tricks.com&obj_id=45537868-607296-674661cb71ca3' data-name='like-comment-frame-45537868-607296-674661cb71ca3'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-634353"> <div class="comment-wrap" id="comment-634353"> <div class="comment-author-wrap"> <div class="comment-author">Shaun Fox</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-634353"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-11-05T15:27:05-07:00">November 5, 2013</time></div> </div> <div class="comment-content"> <p>I’ve been searching for some information on printing SVGs for a while. Some seem to render, but are cropped, some don’t show up at all and I don’t know the distinctions.</p> <p>For instance, <a href="http://shaunfox.com/liquid/svg.html" title="SVG - CSS - PNG resolution test" rel="nofollow ugc">this simple resolution test</a> doesn’t print them at all.</p> <p>But <a href="http://codepen.io/chriscoyier/pen/lCEux" title="Kiwi codepen example" rel="nofollow ugc">your codepen example</a> renders them, but they’re cropped.</p> <p>Any hints?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-634353-674661cb72093' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=634353&origin=css-tricks.com&obj_id=45537868-634353-674661cb72093' data-name='like-comment-frame-45537868-634353-674661cb72093'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-638775"> <div class="comment-wrap" id="comment-638775"> <div class="comment-author-wrap"> <div class="comment-author">Kieran Mahon</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-638775"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-11-07T04:46:19-07:00">November 7, 2013</time></div> </div> <div class="comment-content"> <p>Hi all, I’m using the “Data URI’s for SVG” option and all is well apart from the background position in IE.</p> <p>It seems like IE will only display the svg centred. Cannot seem to override this. I initially had the aligment included in a background shorthand, but also tried separating the css background declarations to no avail.</p> <p>Anyone else confirm this as I may be wasting my time trying to fix this!!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-638775-674661cb72469' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=638775&origin=css-tricks.com&obj_id=45537868-638775-674661cb72469' data-name='like-comment-frame-45537868-638775-674661cb72469'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-660014"> <div class="comment-wrap" id="comment-660014"> <div class="comment-author-wrap"> <div class="comment-author">Jan</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-660014"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-11-13T07:10:00-07:00">November 13, 2013</time></div> </div> <div class="comment-content"> <p>Hi, thank you for this useful guide. Based on this guide I have made world flags rendered only by CSS: <a href="http://www.phoca.cz/cssflags/" rel="nofollow ugc">http://www.phoca.cz/cssflags/</a> . Of course it has pros and cons. And the CSS can be improved (it is just experimental).</p> <p>One thing, I have discovered, not sure if this is valid for all file sizes, but the base64 encoding is much larger then pure SVG code.</p> <p>Unfortunately, Internet Explorer does not support raw SVG code in background attribute, so this is the only one reason why to encode SVG code, I think (maybe I am wrong). The same with uri encoding, the output is smaller than base64 but for Firefox you need to change this character: “#” and of course in Internet Explorer it does not work either.</p> <p>Anyway thank you again for this guide.</p> <p>Jan</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-660014-674661cb727ee' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=660014&origin=css-tricks.com&obj_id=45537868-660014-674661cb727ee' data-name='like-comment-frame-45537868-660014-674661cb727ee'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-663706"> <div class="comment-wrap" id="comment-663706"> <div class="comment-author-wrap"> <div class="comment-author">Jeremy</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-663706"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-11-14T08:42:17-07:00">November 14, 2013</time></div> </div> <div class="comment-content"> <p>@Jan nice work. Sorry to post this here rather than your support forum, but I noticed the top-right and bottom-left stripes in the AU flag are off…</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-663706-674661cb72b4b' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=663706&origin=css-tricks.com&obj_id=45537868-663706-674661cb72b4b' data-name='like-comment-frame-45537868-663706-674661cb72b4b'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-667275"> <div class="comment-wrap" id="comment-667275"> <div class="comment-author-wrap"> <div class="comment-author">Jan</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-667275"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-11-15T07:28:22-07:00">November 15, 2013</time></div> </div> <div class="comment-content"> <p>@Jeremy</p> <p>Hi,</p> <p>thank you for the info, seems like there were some problems while cleaning the SVG.</p> <p>I have cleaned it manually and it seems, it is OK now:</p> <p><a href="http://www.phoca.cz/cssflags/#australia" rel="nofollow ugc">http://www.phoca.cz/cssflags/#australia</a> (make F5 – refresh the site as the wrong SVG can be cached)</p> <p>Thank you, Jan</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-667275-674661cb72ed0' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=667275&origin=css-tricks.com&obj_id=45537868-667275-674661cb72ed0' data-name='like-comment-frame-45537868-667275-674661cb72ed0'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-even depth-1" id="li-comment-692601"> <div class="comment-wrap" id="comment-692601"> <div class="comment-author-wrap"> <div class="comment-author">fjpoblam</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-692601"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-11-22T19:15:39-07:00">November 22, 2013</time></div> </div> <div class="comment-content"> <p>Great (inspiring) article. I’ve now been using svgs on my and clients’ sites for several years. I even converted my logo to an svg — the language seems straightforward enough. One last puzzle for me is the danged css. I have a gradient background, currently set in “html” along with “min-height:100%”. Why? This seems to ensure the gradient proceeds on down the viewport even on pages whose content is <em>very</em> brief. (Like one-liners.) However, the gradient gets stretched to the full length of the content instead of the viewport for longer pages. How consistently (device-agnostic) to fill the viewport?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-692601-674661cb7326e' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=692601&origin=css-tricks.com&obj_id=45537868-692601-674661cb7326e' data-name='like-comment-frame-45537868-692601-674661cb7326e'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-744521"> <div class="comment-wrap" id="comment-744521"> <div class="comment-author-wrap"> <div class="comment-author">Steve Smith</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-744521"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-12-01T06:22:13-07:00">December 1, 2013</time></div> </div> <div class="comment-content"> <p>Thank you for the article – I am new to svg (and Illustrator) and this helped me enormously.</p> <p>I have made a glass button in Illustrator as per these <a href="http://ndesign-studio.com/tutorials/glossy-button" rel="nofollow ugc">simple instructions</a> and saved it as an svg file using your recommended settings above. It looks great in Illustrator but looks terrible in a browser: the transparent gradient doesn’t work at all. I have googled this for a solution until my fingers are bleeding but cannot find one anywhere – is there one?</p> <p>Thank you again for your great article.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-744521-674661cb7356e' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=744521&origin=css-tricks.com&obj_id=45537868-744521-674661cb7356e' data-name='like-comment-frame-45537868-744521-674661cb7356e'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment byuser comment-author-lmmddx odd alt thread-even depth-1" id="li-comment-820505"> <div class="comment-wrap" id="comment-820505"> <div class="comment-author-wrap"> <div class="comment-author">Louis</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-820505"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2013-12-12T18:36:27-07:00">December 12, 2013</time></div> </div> <div class="comment-content"> <p>Hey Chris / anyone else reading this,</p> <p>I’ve got an image inside a unicode character,▼, giving me a nice effect without having to create a transparent png, it actually looks pretty neat.</p> <p>Was wondering if it’s possible to animate the image inside this ? Tried to animate opacity but it’s not looking very good (never reaches full opacity for some reason, guessing a bug in webkit?) <a href="http://jsfiddle.net/n7Wy6/" rel="nofollow ugc">http://jsfiddle.net/n7Wy6/</a></p> <p>Just wondering what else is possible?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-820505-674661cb745b1' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=820505&origin=css-tricks.com&obj_id=45537868-820505-674661cb745b1' data-name='like-comment-frame-45537868-820505-674661cb745b1'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-1210653"> <div class="comment-wrap" id="comment-1210653"> <div class="comment-author-wrap"> <div class="comment-author">Luke</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1210653"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-02-27T03:34:57-07:00">February 27, 2014</time></div> </div> <div class="comment-content"> <p>I’ve done so much research online and I genuinely cannot figure out how to make an svg logo in illustrator and have it appear on a website with a transparent background…</p> <p>I want to use an svg file for a very small icon in a menu (combating the zooming problems) however it is appearing with a white background.. Is there a way around this??</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1210653-674661cb7495a' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1210653&origin=css-tricks.com&obj_id=45537868-1210653-674661cb7495a' data-name='like-comment-frame-45537868-1210653-674661cb7495a'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment byuser comment-author-jswain odd alt thread-even depth-1" id="li-comment-1341978"> <div class="comment-wrap" id="comment-1341978"> <div class="comment-author-wrap"> <div class="comment-author">jswain</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1341978"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-03-14T10:28:24-06:00">March 14, 2014</time></div> </div> <div class="comment-content"> <p>Great article/tutorial, helped loads … Extra thanks to Ben for his tweaks to make it accessible (march 7th post).</p> <p>J</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1341978-674661cb760ee' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1341978&origin=css-tricks.com&obj_id=45537868-1341978-674661cb760ee' data-name='like-comment-frame-45537868-1341978-674661cb760ee'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-1397595"> <div class="comment-wrap" id="comment-1397595"> <div class="comment-author-wrap"> <div class="comment-author">jasonbdesign</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1397595"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-03-20T09:13:49-06:00">March 20, 2014</time></div> </div> <div class="comment-content"> <p>How do you do a fill change on :hover when your svg icon is like a ‘hollow’ box? Once I’m inside the box, and not technically on the thin svg, I lose the hover. I tried doing a display:block on a parent div and putting the over on that. It seems I can’t override anything in the xml loaded stylesheet via an external one.</p> <p>I hope that makes sense. I’m trying to work with an envelope icon made up of very thin lines. The inside of the envelope is transparent. Unless I’m on the thin lines, I loose the hover.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1397595-674661cb76636' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1397595&origin=css-tricks.com&obj_id=45537868-1397595-674661cb76636' data-name='like-comment-frame-45537868-1397595-674661cb76636'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="li-comment-1399014"> <div class="comment-wrap" id="comment-1399014"> <div class="comment-author-wrap"> <div class="comment-author">jasonbdesign</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1399014"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-03-20T12:52:33-06:00">March 20, 2014</time></div> </div> <div class="comment-content"> <p>I solved the problem above by using a hover on a group, defining an opacity 0 rectangle inside, then having my path. This way if you have a thin icon, you’re using the invisible square to define the ‘hotspot’.</p> <p>Note: I didn’t post the html here, but I used the object method Chris described above.</p> <p>svg.css:<br /> /* Icons */</p> <pre><code>.off_state { fill: #A7A9AB; } .link_area { opacity: 0; } .link_group:hover > .off_state { fill: #FF0000; } </code></pre> <p>SVG:</p> <pre><code><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29"> <g class="link_group"><rect class="link_area" x="0px" y="0px" width="29px" height="29px"/><path d="M2.985 6.088v16.562h23.028V6.088H2.985z M14.268 16.258l-9.615-9.17h19.579L14.268 16.258z M10.56 14.1 l-6.574 6.707V7.833L10.56 14.104z M11.283 14.794l2.972 2.835l3.131-2.882l6.619 6.903H4.562L11.283 14.794z M18.123 14.1 l6.891-6.342v13.529L18.123 14.07z" class="off_state"/></g></svg> </code></pre> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1399014-674661cb76c4f' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1399014&origin=css-tricks.com&obj_id=45537868-1399014-674661cb76c4f' data-name='like-comment-frame-45537868-1399014-674661cb76c4f'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ul> </li> <li class="comment even thread-even depth-1" id="li-comment-1447658"> <div class="comment-wrap" id="comment-1447658"> <div class="comment-author-wrap"> <div class="comment-author">Jason Lombard</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1447658"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-03-26T04:15:59-06:00">March 26, 2014</time></div> </div> <div class="comment-content"> <p>Hi Technie Geeks,</p> <p>Can any kind soul tell me in simple english how one can place an.svg Image file into a HTML5 webpage?</p> <p>I’m old-fashioned in normally using the standard HTML format but would like to know how and where to place the embedded svg code?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1447658-674661cb770f7' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1447658&origin=css-tricks.com&obj_id=45537868-1447658-674661cb770f7' data-name='like-comment-frame-45537868-1447658-674661cb770f7'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1498868"> <div class="comment-wrap" id="comment-1498868"> <div class="comment-author-wrap"> <div class="comment-author">John</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1498868"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-04-01T23:14:03-06:00">April 1, 2014</time></div> </div> <div class="comment-content"> <p>What a fantastic post and discussion. Thank you!</p> <p>I’m curious, has anyone experimented with creating their own font as an alternative means to achieve vector quality/scalable graphics with CSS control? Doesn’t fontface have better support in older versions of IE than SVG?</p> <p><a href="http://caniuse.com/fontface" rel="nofollow ugc">http://caniuse.com/fontface</a><br /> <a href="http://caniuse.com/svg" rel="nofollow ugc">http://caniuse.com/svg</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1498868-674661cb784bd' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1498868&origin=css-tricks.com&obj_id=45537868-1498868-674661cb784bd' data-name='like-comment-frame-45537868-1498868-674661cb784bd'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-1501858"> <div class="comment-wrap" id="comment-1501858"> <div class="comment-author-wrap"> <div class="comment-author">Valery</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1501858"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-04-02T09:09:42-06:00">April 2, 2014</time></div> </div> <div class="comment-content"> <p>I’d like to use SVG in my projects, but the inability to cache seems like a huge dealbreaker. If you use it on your logo, which is on every page, wouldn’t that make the entire site in-cacheable? What if it’s for a large complex site where caching is crucial for performance?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1501858-674661cb7884f' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1501858&origin=css-tricks.com&obj_id=45537868-1501858-674661cb7884f' data-name='like-comment-frame-45537868-1501858-674661cb7884f'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1579919"> <div class="comment-wrap" id="comment-1579919"> <div class="comment-author-wrap"> <div class="comment-author">ezra</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1579919"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-04-16T03:08:28-06:00">April 16, 2014</time></div> </div> <div class="comment-content"> <p>Thanks for the article! About the usable properties for styling, I found the following:<br /> <a href="http://www.w3.org/TR/SVG11/styling.html#SVGStylingProperties" rel="nofollow ugc">http://www.w3.org/TR/SVG11/styling.html#SVGStylingProperties</a></p> <p>Don’t know if it’s up-to-date/relevant/implemented though.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1579919-674661cb795f1' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1579919&origin=css-tricks.com&obj_id=45537868-1579919-674661cb795f1' data-name='like-comment-frame-45537868-1579919-674661cb795f1'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-1580290"> <div class="comment-wrap" id="comment-1580290"> <div class="comment-author-wrap"> <div class="comment-author">Michiel</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1580290"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-04-24T03:09:46-06:00">April 24, 2014</time></div> </div> <div class="comment-content"> <p>The issue with Firefox making scaled SVGs blurry, mentioned above, has been fixed from version 24 and up. The most recent version at the time of writing this is 28. (24-04-2014)</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1580290-674661cb79c1f' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1580290&origin=css-tricks.com&obj_id=45537868-1580290-674661cb79c1f' data-name='like-comment-frame-45537868-1580290-674661cb79c1f'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1580378"> <div class="comment-wrap" id="comment-1580378"> <div class="comment-author-wrap"> <div class="comment-author">Denn</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1580378"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-04-25T12:27:52-06:00">April 25, 2014</time></div> </div> <div class="comment-content"> <p>Perhaps I’m confused, but since IE8 doesn’t really support javascript I don’t see how this is gong to work.<br /> if (!Modernizr.svg) {<br /> $(‘img[src$=”.svg”]’).each(function() {<br /> var $this = $(this); // this = img<br /> $this.attr(‘src’, $this.attr(‘src’).replace(/svg$/, ‘png’));<br /> });<br /> }<br /> I’ve tried adding it (in a script tag pair in the header) and it fails on IE8 tests as does the solution proposed here <a href="http://wedelivery.com/lab/svg/" rel="nofollow ugc">http://wedelivery.com/lab/svg/</a> (posted by someone above)</p> <p>Am I missing something? Can anyone point me to a site that shows a clean swap from svg to png in IE8 using that global script?</p> <p>The version that uses onerror works because the overlap between jscript (M$’s script version and javascript is sufficient to make it work but the global one does not seem to. I would love a global solution for that as now we just degrade the whole site and suggest they might want to think about a newer browser.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1580378-674661cb7a264' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1580378&origin=css-tricks.com&obj_id=45537868-1580378-674661cb7a264' data-name='like-comment-frame-45537868-1580378-674661cb7a264'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-1580403"> <div class="comment-wrap" id="comment-1580403"> <div class="comment-author-wrap"> <div class="comment-author">Sean</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1580403"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-04-26T08:44:58-06:00">April 26, 2014</time></div> </div> <div class="comment-content"> <p>Based on your article, I made a command line SVG optimizer and base64 encoder. It is very easy to use “svgoptimizer -h” will show how it is used. <a href="https://gist.github.com/mrinterweb/11303706" rel="nofollow ugc">https://gist.github.com/mrinterweb/11303706</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1580403-674661cb7a7ed' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1580403&origin=css-tricks.com&obj_id=45537868-1580403-674661cb7a7ed' data-name='like-comment-frame-45537868-1580403-674661cb7a7ed'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1580777"> <div class="comment-wrap" id="comment-1580777"> <div class="comment-author-wrap"> <div class="comment-author">G</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1580777"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-05-05T15:11:21-06:00">May 5, 2014</time></div> </div> <div class="comment-content"> <p>I have a Q? I used the object route for the .svg – it worked great in some ways… the fall back .png worked.. my .svg tho viewed online as a box in the correct size but it had the .txt file code in it?? I did make my .svg in ILL cs3 and used DW cs3 to html and upload… I tried it every way even your other opts and still – I think it works but my .svg shows as text code in image area with scrolls… I even tried all the different opts when saving .svg found on various sites… hmmm can u help? Has anyone had this [what I am sure is a minor…] happen before… Do I need to use the cloud or cs5 or higher… My site is HTML 5 and reponsive… I am baffled.. It was my first attempt as I want all my vectors to be .svg so they scale and look awesome!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1580777-674661cb7ad75' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1580777&origin=css-tricks.com&obj_id=45537868-1580777-674661cb7ad75' data-name='like-comment-frame-45537868-1580777-674661cb7ad75'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-1580990"> <div class="comment-wrap" id="comment-1580990"> <div class="comment-author-wrap"> <div class="comment-author">Angie</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1580990"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-05-09T08:24:06-06:00">May 9, 2014</time></div> </div> <div class="comment-content"> <p>Thank you for this article, it’s very well written and informative, but I have a question. When I save my svg from Illustrator, my code isn’t picking up the size of my artboard (the height and width don’t show in the markup) and my image is not responsive. From the article, it seems that this should be the default behavior. I’m using Adobe CC, so it should be the most up-to-date. Is there a setting I need to make in order for the svg to pick up the size of the artboard? Currently, when I open it in the browser, it renders the full height and width, not the settings I gave it. Is there a fix for that?</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1580990-674661cb7b1cc' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1580990&origin=css-tricks.com&obj_id=45537868-1580990-674661cb7b1cc' data-name='like-comment-frame-45537868-1580990-674661cb7b1cc'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-1582068"> <div class="comment-wrap" id="comment-1582068"> <div class="comment-author-wrap"> <div class="comment-author">Alex</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1582068"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-06-04T01:56:29-06:00">June 4, 2014</time></div> </div> <div class="comment-content"> <p>Great article. I have recently started using SVG’s and found this really useful. I am however wondering if any one can assist me with an issue I am tackling. I have a single SVG logo which uses DEFS and USE for various colours. I am then including the logo using the method. As the logo is used in two separate areas of the page template I wanted to use CSS to style the SVG fill colour dependent on the objects unique ID. Is this possible to do with CSS? I can do this with script or adding the SVG code directly onto the template, but ideally wanted to use CSS. Thanks!</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1582068-674661cb7b52c' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1582068&origin=css-tricks.com&obj_id=45537868-1582068-674661cb7b52c' data-name='like-comment-frame-45537868-1582068-674661cb7b52c'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-1582181"> <div class="comment-wrap" id="comment-1582181"> <div class="comment-author-wrap"> <div class="comment-author">Joanne</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1582181"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-06-05T12:32:38-06:00">June 5, 2014</time></div> </div> <div class="comment-content"> <p>Thanks a lot for the information, you answered all my questions in one fell swoop.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1582181-674661cb7b7fd' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1582181&origin=css-tricks.com&obj_id=45537868-1582181-674661cb7b7fd' data-name='like-comment-frame-45537868-1582181-674661cb7b7fd'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1 buried" id="li-comment-1582837"> <div class="comment-wrap" id="comment-1582837"> <div class="comment-author-wrap"> <div class="comment-author">Mark Miller</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1582837"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-06-18T08:39:20-06:00">June 18, 2014</time></div> </div> <div class="comment-content"> <p>Great stuff Chris! Thanks for the detailed explanation.</p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1582837-674661cb7bbc9' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1582837&origin=css-tricks.com&obj_id=45537868-1582837-674661cb7bbc9' data-name='like-comment-frame-45537868-1582837-674661cb7bbc9'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-1583148"> <div class="comment-wrap" id="comment-1583148"> <div class="comment-author-wrap"> <div class="comment-author">ruggero</div> <div class="comment-time"><a href="https://css-tricks.com/using-svg/#comment-1583148"><span class="screen-reader">Permalink to comment</span>#</a> <time datetime="2014-06-25T16:30:12-06:00">June 25, 2014</time></div> </div> <div class="comment-content"> <p>just spotting an opensource SVG background pattern library on github: <a href="http://buseca.github.io/patternbolt/" title="http://buseca.github.io/patternbolt/" rel="nofollow ugc">http://buseca.github.io/patternbolt/</a></p> <div class='jetpack-comment-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-comment-wrapper-45537868-1583148-674661cb7beef' data-src='https://widgets.wp.com/likes/#blog_id=45537868&comment_id=1583148&origin=css-tricks.com&obj_id=45537868-1583148-674661cb7beef' data-name='like-comment-frame-45537868-1583148-674661cb7beef'> <div class='likes-widget-placeholder comment-likes-widget-placeholder comment-likes'><span class='loading'>Loading...</span></div> <div class='comment-likes-widget jetpack-likes-widget comment-likes'><span class='comment-like-feedback'></span><span class='sd-text-color'></span><a class="sd-link-color" rel="ugc"></a></div> </div> </div> <div class="comment-actions"> <div class="reply"> </div> </div> </div> </li> </ol> <div class="comments-closed"> This comment thread is closed. If you have important information to share, please <a href="/contact/">contact us</a>. </div> </section> <div class="related-posts"> <div id='jp-relatedposts' class='jp-relatedposts' > </div></div> </div> </div> </div> <footer class="site-footer"> <svg class="icon-logo-star" width="35px" height="35px" viewBox="0 0 362.62 388.52" data-spin-me="false"> <path d="M156.58,239l-88.3,64.75c-10.59,7.06-18.84,11.77-29.43,11.77-21.19,0-38.85-18.84-38.85-40C0,257.83,14.13,244.88,27.08,239l103.6-44.74L27.08,148.34C13,142.46,0,129.51,0,111.85,0,90.66,18.84,73,40,73c10.6,0,17.66,3.53,28.25,11.77l88.3,64.75L144.81,44.74C141.28,20,157.76,0,181.31,0s40,18.84,36.5,43.56L206,149.52l88.3-64.75C304.93,76.53,313.17,73,323.77,73a39.2,39.2,0,0,1,38.85,38.85c0,18.84-12.95,30.61-27.08,36.5L231.93,194.26,335.54,239c14.13,5.88,27.08,18.83,27.08,37.67,0,21.19-18.84,38.85-40,38.85-9.42,0-17.66-4.71-28.26-11.77L206,239l11.77,104.78c3.53,24.72-12.95,44.74-36.5,44.74s-40-18.84-36.5-43.56Z" /> </svg> <div class="footer-inside"> <div class="footer-message-and-form"> <p class="colophon"> CSS-Tricks is powered by <a href="https://www.digitalocean.com/?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link">DigitalOcean</a>. </p> <div class="footer-form-wrap"> <h4>Keep up to date on web dev</h4> <p>with our hand-crafted newsletter</p> <form id="mktoForm_1402"></form> </div> </div> <div class="link-grid"> <div> <div> <h5>DigitalOcean</h5> <nav id="footer-nav-digitalocean" class="footer-nav" role="navigation"> <ul id="menu-digitalocean" class="menu"><li id="menu-item-379274" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379274"><a href="https://www.digitalocean.com/about?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link">About DO</a></li> <li id="menu-item-379275" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379275"><a href="https://www.cloudways.com/en/wordpress-hosting.php?id=1223312">Cloudways</a></li> <li id="menu-item-379276" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379276"><a href="https://www.digitalocean.com/legal?utm_source=css-tricks.com&utm_medium=cta&utm_campaign=website_link">Legal stuff</a></li> <li id="menu-item-379277" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-379277"><a href="https://try.digitalocean.com/css-tricks/?utm_source=wordpress-1242695-4567563.cloudwaysapps.com&utm_medium=cta&utm_campaign=website_link">Get free credit!</a></li> </ul> </nav> </div> </div> <div> <div> <h5>CSS-Tricks</h5> <nav id="footer-nav-csstricks" class="footer-nav" role="navigation"> <ul id="menu-css-tricks" class="menu"><li id="menu-item-379046" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-379046"><a href="https://css-tricks.com/guest-writing/">Write for us!</a></li> <li id="menu-item-379047" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-379047"><a href="https://css-tricks.com/advertising/">Advertise with us</a></li> <li id="menu-item-379048" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-379048"><a href="https://css-tricks.com/contact/">Contact us</a></li> </ul> </nav> </div> </div> <div> <div> <h5>Social</h5> <nav id="footer-nav-social" class="footer-nav" role="navigation"> <ul id="menu-social" class="menu"><li id="menu-item-379051" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-379051"><a href="https://css-tricks.com/rss-feeds/">RSS Feeds</a></li> <li id="menu-item-377816" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-377816"><a href="https://codepen.io/team/css-tricks">CodePen</a></li> <li id="menu-item-377813" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-377813"><a href="https://mastodon.social/@csstricks">Mastodon</a></li> <li id="menu-item-382192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382192"><a href="https://bsky.app/profile/css-tricks.com">Bluesky</a></li> </ul> </nav> </div> </div> </div> </div> <a href="#top-of-site" class="top-of-site-link" data-visible="false"> <span class="screen-reader-text">Back to Top</span> <svg width="32" height="32" viewBox="0 0 100 100"> <path fill="white" d="m50 0c-13.262 0-25.98 5.2695-35.355 14.645s-14.645 22.094-14.645 35.355 5.2695 25.98 14.645 35.355 22.094 14.645 35.355 14.645 25.98-5.2695 35.355-14.645 14.645-22.094 14.645-35.355-5.2695-25.98-14.645-35.355-22.094-14.645-35.355-14.645zm20.832 62.5-20.832-22.457-20.625 22.457c-1.207 0.74219-2.7656 0.57812-3.7891-0.39844-1.0273-0.98047-1.2695-2.5273-0.58594-3.7695l22.918-25c0.60156-0.61328 1.4297-0.96094 2.2891-0.96094 0.86328 0 1.6914 0.34766 2.293 0.96094l22.918 25c0.88672 1.2891 0.6875 3.0352-0.47266 4.0898-1.1562 1.0508-2.9141 1.0859-4.1133 0.078125z"/> </svg> </a> <div id="consent-banner"></div> <div id="teconsent"> </div> </footer> <iframe src='https://widgets.wp.com/likes/master.html?ver=20241127#ver=20241127&n=1' scrolling='no' id='likes-master' name='likes-master' style='display:none;'></iframe> <div id='likes-other-gravatars' class='wpl-new-layout' role="dialog" aria-hidden="true" tabindex="-1"><div class="likes-text"><span>%d</span></div><ul class="wpl-avatars sd-like-gravatars"></ul></div> <svg width="0" height="0" class="screen-reader"> <defs> <linearGradient id="orange-to-pink" x1="0" x2="1" y1="0" y2="1"> <stop offset="0%" stop-color="#ff7a18" /> <stop offset="40%" stop-color="#af002d" /> <stop offset="100%" stop-color="#319197" /> </linearGradient> <filter id="duotone_orange_pink"> <feColorMatrix type="matrix" result="grayscale" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 1 0"> </feColorMatrix> <feComponentTransfer color-interpolation-filters="sRGB" result="duotone"> <feFuncR type="table" tableValues="0.7411764706 0.9882352941"></feFuncR> <feFuncG type="table" tableValues="0.0431372549 0.7333333333"></feFuncG> <feFuncB type="table" tableValues="0.568627451 0.05098039216"></feFuncB> <feFuncA type="table" tableValues="0 1"></feFuncA> </feComponentTransfer> </filter> </defs> </svg> <script type="text/javascript" id="jetpack_related-posts-js-extra"> /* <![CDATA[ */ var related_posts_js_options = {"post_heading":"h4"}; /* ]]> */ </script><script src="https://c0.wp.com/p/jetpack/14.0/_inc/build/related-posts/related-posts.min.js" id="jetpack_related-posts-js"></script><script type="text/javascript" id="breeze-prefetch-js-extra"> /* <![CDATA[ */ var breeze_prefetch = {"local_url":"https:\/\/css-tricks.com","ignore_remote_prefetch":"1","ignore_list":["wp-admin","wp-login.php"]}; /* ]]> */ </script><script src="https://css-tricks.com/wp-content/plugins/breeze/assets/js/js-front-end/breeze-prefetch-links.min.js?ver=2.1.19" id="breeze-prefetch-js"></script><script> var articleID = 20319; var articleYear = 2013; var articleAuthor = "3"; var articleType = "post"; </script><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><script src="//anchor.digitalocean.com/js/forms2/js/forms2.min.js"></script><script>MktoForms2.loadForm("//anchor.digitalocean.com", "113-DTN-266", 1402);</script><script async="async" src="//consent.trustarc.com/notice?domain=css-tricks.com&c=teconsent&js=nj&noticeType=bb&text=true&gtm=1" crossorigin></script><script> var style = document.createElement('style'); style.innerHTML = '#teconsent {position: fixed; z-index: 1000; bottom: 0px; right: 0; font-size: 0px; height: 33px;}'; document.head.appendChild(style); </script><script type="text/javascript" id="bbp-swap-no-js-body-class"> document.body.className = document.body.className.replace( 'bbp-no-js', 'bbp-js' ); </script><script type="module" src="https://css-tricks.com/wp-content/plugins/baseline-status/baseline-status.js?ver=1.0.4"></script><script src="https://css-tricks.com/wp-content/themes/CSS-Tricks-19/js/min/jquery-3.5.1.min.js" id="jquery-js"></script><script type="text/javascript" id="jetpack-live-comment-markdown-js-extra"> /* <![CDATA[ */ var markdownify = {"ajax_url":"\/wp-admin\/admin-ajax.php","nonce":"643c5a3f63"}; /* ]]> */ </script><script src="https://css-tricks.com/wp-content/plugins/jetpack-markdown-live-preview-comments/js/markdownify.js?ver=1" id="jetpack-live-comment-markdown-js"></script><script src="https://css-tricks.com/wp-content/plugins/breeze/assets/js/js-front-end/breeze-lazy-load.min.js?ver=2.1.19" id="breeze-lazy-js"></script><script src="https://c0.wp.com/p/jetpack/14.0/modules/likes/queuehandler.js" id="jetpack_likes_queuehandler-js"></script><script src="https://stats.wp.com/e-202448.js" id="jetpack-stats-js" data-wp-strategy="defer"></script><script id="jetpack-stats-js-after"> /* <![CDATA[ */ _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"45537868\",\"post\":\"20319\",\"tz\":\"-7\",\"srv\":\"css-tricks.com\",\"j\":\"1:14.0\"}") ]); _stq.push([ "clickTrackerInit", "45537868", "20319" ]); /* ]]> */ </script><script type="text/javascript">window.addEventListener("DOMContentLoaded",(e=>{document.querySelectorAll('img[loading="lazy"]').forEach((e=>{e.getBoundingClientRect().top<=window.innerHeight&&(e.loading="eager")}))}));</script><script src="https://css-tricks.com/wp-content/themes/CSS-Tricks-19/js/min/global-concat.min.js?cache_bust=1732132808837"></script><script> window.addEventListener("load", () => { const consent = truste.cma.callApi("getGDPRConsentDecision","css-tricks.com"); // Google Analytics and Segment are functional if (consent.consentDecision.includes(2) || (consent.source === 'implied' && truste.eu.bindMap.behaviorManager !== 'eu')) { // Google Analytics (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-68528-29', 'auto'); if (typeof articleYear !== "undefined") { ga('set', 'dimension1', articleYear); } if (typeof articleAuthor !== "undefined") { ga('set', 'dimension2', articleAuthor); } if (typeof articleType !== "undefined") { ga('set', 'dimension3', articleType); } ga('send', 'pageview'); // Segment Analytics !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="nnmtLrk127wcC9ggBpAutRr4F4x4TMVz";;analytics.SNIPPET_VERSION="4.15.3"; analytics.load("nnmtLrk127wcC9ggBpAutRr4F4x4TMVz"); const analyticsProperties = {}; if (typeof articleID !== "undefined") { analyticsProperties.article_id = articleID; } if (typeof articleYear !== "undefined") { analyticsProperties.article_year = articleYear; } if (typeof articleAuthor !== "undefined") { analyticsProperties.article_author = articleAuthor; } if (typeof articleType !== "undefined") { analyticsProperties.article_type = articleType; } analytics.page({ properties: analyticsProperties }); }}(); } }); </script><script async src="https://static.codepen.io/assets/embed/ei.js"></script><script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script></body> </html>