The document discusses techniques for making SVG graphics responsive. It describes using media queries directly in SVG code to serve different background images based on viewport width. It also covers embedding SVG using inline, <img>, and <object> tags and their tradeoffs. The "Clown Car Technique" embeds the SVG as an <object> and uses media queries inside the SVG to switch background images. The "Poor Man's Method" defines all icon variants inside the SVG and shows/hides them with media queries. The "Man With A Gun's Method" uses transforms to adapt a single SVG to different sizes. JavaScript can also be added to SVG to make it more dynamic and responsive.

1. Scalable Vector Graphics.
Next Level
Ilya Pukhalski,
April 2014

2. @pukhalski
!
Solution Architect, EPAM Systems
Lecturer, British Higher School of Art & Design

3. You think you know SVG

4. I was pretty sure as well…

5. Boring & Crazy

6. Booooooooooring

14. xframeworkjs.org

15. xframeworkjs.org

16. Crazy.

17. <svg width="96" height="96">
<image xlink:href="svg.svg"
src="svg.png"
width="96" height="96"/>
</svg>

18. (a slide with an example
of train animation using
SVG path)
Promote with Pukhalski. Put your ad here.

19. SVG Sprites

22. .module {
background: url('logo.png');
background: none, url('logo.svg');
}

23. SVG Stacks

26. Clown Car Technique

27. How do you serve
responsive images?

28. !
<img
alt="responsive image"
src="small.jpg"
srcset="large.jpg 1600w,
large.jpg 800w 1.95x,
medium.jpg 800w,
medium.jpg 400w 1.95x”>
Image Source Set

29. !
<picture alt="responsive image">
<source src="large.jpg" media="(min-­‐width:1600px),
(min-­‐resolution: 136dpi) and (min-­‐width:800px)">
<source src="medium.jpg" media="(min-­‐width:800px),
(min-­‐resolution: 136dpi) and (min-­‐width:400px)">
<source src="small.jpg">
<!-­‐-­‐ fallback -­‐-­‐>
<img src="small.jpg" alt="responsive image">
</picture>
Picture Element

30. The best solution so far?

31. Clown Car Technique
• SVG
• Media-queries
• Background images

32. SVG Support

33. MQ inside SVG

34. <svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 329"
preserveAspectRatio="xMidYMid meet">
!
<title>Clown Car Technique</title>
!
</svg>

35. svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}
!
@media screen and (max-width: 400px) {
svg {
background-image: url("images/small.png");
}
}
!
@media screen and (min-width: 401px) and (max-width: 700px) {
svg {
background-image: url(images/medium.png);
}
}
!

36. !
@media screen and (min-width: 401px) and (max-width: 700px) {
svg {
background-image: url(images/medium.png);
}
}
!
@media screen and (min-width: 701px) and (max-width: 1000px) {
svg {
background-image: url(images/big.png);
}
}
!
@media screen and (min-width: 1001px) {
svg {
background-image: url(images/huge.png);
}
}

37. <svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 329" preserveAspectRatio="xMidYMid meet">
!
<title>Clown Car Technique</title>
!
<style>
svg {
background-size: 100% 100%;
background-repeat: no-repeat;
}
!
@media screen and (max-width: 400px) {
svg {
background-image: url("images/small.png");
}
}
!

38. Embedding SVG
• inline
• img / image
• object

39. Embedding inline
• 1 HTTP Request
• Safari and Chrome have a bug
with support of
preserveAspectRatio

40. Img
• 2 HTTP Requests
• Cleaner markup
• Most browsers have content
security issues with loading
images

41. Object
• 2 HTTP Requests
• No issues with content security
• preserveAspectRatio supported

42. One more thing about
<object>
• Media-queries will react to the size of object’s
parent container

43. Old Browsers?
<object data="awesomefile.svg"
type=“image/svg+xml">
!
!
<img src="medium.png" alt=“Medium">
!
</object>

44. Old Browsers?
<object data="awesomefile.svg"
type="image/svg+xml">
<!--[if lte IE 8]>
<img src="medium.png" alt="Fallback for IE">
<![endif]-->
</object>

45. Single HTTP request?
<object data="data:image/svg+xml,%3Csvg
%20viewBox='0%200%20300%20329'%20preserveAspectRatio='xMidYMid
%20meet'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EClown%20Car
%20Technique%3C/title%3E%3Cstyle%3Esvg%7Bbackground-size:
100%25%20100%25;background-repeat:no-repeat;%7D@media%20screen%20and
%20(max-width:400px)%7Bsvg%7Bbackground-image:url(images/small.png);%7D
%7D@media%20screen%20and%20(min-width:401px)%7Bsvg%7Bbackground-
image:url(images/medium.png);%7D%7D@media%20screen%20and%20(min-width:
701px)%7Bsvg%7Bbackground-image:url(images/big.png);%7D%7D@media
%20screen%20and%20(min-width:1001px)%7Bsvg%7Bbackground-
image:url(images/huge.png);%7D%7D%3C/style%3E%3C/svg%3E"
type="image/svg+xml">
<!--[if lte IE 8]>
<img src="images/medium.png" alt="Fallback for IE">
<![endif]-->
</object>

49. Accessability
• title and desc to SVG
• ARIA role=“img” and other aria attar
• tab-index=0
• alt to fallback images
• Add text inside object

50. Drawbacks

51. Benefits
• Incapsulated logic

52. Rethinking Responsive SVG

53. Responsive SVG.
The Hobo’s Method

54. Responsive Icons (SVG)

55. Responsive Icons (SVG)

56. Responsive Icons (SVG)

57. Responsive Icons (SVG)

58. Responsive Icons (SVG)

59. .icon {
width: 300px;
height: 300px;
background: url(../images/home_sprite.svg);
background-position: center top;
}
Responsive Icons (SVG)

60. @media only screen and (min-width: 65em)
and (min-height:40em) {
!
.icon {background-position: center -2400px;}
!
}
Responsive Icons (SVG)

61. @media only screen and (min-width: 60em)
and (min-height:37em) {
!
.icon {background-position: center -2100px;}
!
}
@media only screen and (min-width: 55em)
and (min-height:33em) {
!
.icon {background-position: center -1800px;}
!
}
Responsive Icons (SVG)

62. Drawbacks
• External CSS
• 8 different illustrations
• Can we make something more
efficient than this technique
from 90s?

63. So…
• SVG can contain styles inside
• SVG supports media-queries
• SVG can react to the parent container size

64. Responsive SVG.
The Poor Man’s Method

65. Removing debuff

66. <svg>
<g id="home_icon_0" class="icon">
<!-- paths and shapes -->
</g>
!
<!-- ... -->
!
<g id="home_icon_8" class="icon">
<!-- paths and shapes -->
</g>
</svg>

67. <svg>
<defs>
<style>
/* Hide all of the icons first. */
.icon {
display: none;
}
!
/* Display the first one. */
#home_icon_0 {
display: block;
}
!
!
</style>
</defs>
!
<!-- Icon groups go here -->
!
</svg>

69. }
!
/* Display the desired icon and hide the others according
to the viewport's size. */
@media screen and (min-width: 25em) {
!
#home_icon_0 {
display: none;
}
!
#home_icon_1 {
display: block;
}
}
!
@media screen and (min-width: 30em) {
#home_icon_1 {
display: none;

70. }
!
@media screen and (min-width: 30em) {
#home_icon_1 {
display: none;
}
!
#home_icon_2 {
display: block;
}
}
!
/* And so on */
!
</style>
</defs>
!
<!-- Icon groups go here -->
!

80. Responsive SVG.
The Man With A Gun’s Method

81. What means
responsive?

83. Thinking about “responsive”,
we imagine content
choreography first.

85. • Code of redrawn house and initial one

86. <svg>
<defs>
<style>
@media screen and (max-width: 65em) {
!
#door-shadow, #tube-shadow, .backyard {
display: none;
}
!
#door-body {
fill: white;
}
!
#door-handle {

87. fill: #E55C3C;
}
!
#door-body, #door-handle {
-ms-transform: translate(0,0);
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
!
#window {
-ms-transform: translate(0,0) scale(1);
-webkit-transform: translate(0,0) scale(1)
transform: translate(0,0) scale(1);
}
!
#house-body {

88. -webkit-transform: translate(0,0) scale(1)
transform: translate(0,0) scale(1);
}
!
#house-body {
-ms-transform: scaleX(1) translate(0, 0);
-webkit-transform: scaleX(1) translate(0,
transform: scaleX(1) translate(0, 0);
}
!
#tube-body {
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}

90. Adapting to parent container size
<div style="width: 100%;">
<object>
<embed src=“responsive3.svg" />
</object>
</div>

91. 8 containers
with different
size.
!
One and the
same SVG file.

92. Browser Support
• Internet Explorer 9+
• Firefox 17+
• Chrome 17+
• Opera 15+
• Safari 6.0+
• Safari on iOS 6.0+
• Android browser on Android 3.0+

93. Benefits

94. Drawbacks
• Difficult to create

95. Adding JavaScript to all this
mess
• More good news

96. SVG as a module

97. What if…
• Add JavaScript logic into SVG file?
• AMD/LMD for SVG?
• SVG-based UI?
• …
• Do you still think I’m OK?

98. Search. Explore. Investigate.
Share.
@pukhalski