Simple Adaptive SVG Demo

This is one of the simpler but pretty effective ways of applying media queries in SVG. It's relatively easy to strip away some of the data, and emphasize and scale up the remaining information in smaller screen formats.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Simple Adaptive SVG Demo</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import "compass/css3";


    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <svg id="flappybird" viewBox="0 0 1296 639" width="100%" height="100%">
<style>

#trendline {
  stroke-dasharray:0;
  stroke-width:10;
  stroke:red;
  fill:none;
}
#trendline-filled{
  fill:none;
  }
#axis{
  stroke:#333333; 
  stroke-width: 1;
  fill: none;
  }
#titles .subtitle {
  font-size:26px;
  color:#000;
  font-family:Helvetica;
  text-align:left
}

#titles .title {
  font-size:50px;
  color:#000;
  font-family:Helvetica, Arial, sans-serif;
}

.text {
  font-size:32px;
  font-family:Helvetica;
  transform: translate(-20px);
  
}

.horizontals {
  stroke:#333;
  stroke-width:0;
  fill:none;
  stroke-dasharray:2 5;
}

 #date-range text:nth-child(odd),
 #tweet-total-range text:nth-child(odd) {
  opacity: 0;
  transition: opacity .5s ease-in-out
}

@media only screen and (min-width: 700px) { /* desktop */
 
  #tweet-total-range text:nth-child(odd),
  #date-range text:nth-child(odd)  {
    opacity:1;
    transition:opacity .5s ease-in-out;
  }
  
  #trendline {
    stroke-width:7;
    stroke-dasharray: 5 3;
    stroke: red
  }
  #trendline-filled{
    fill:#ffaa00;
    fill-opacity: 0.2;
  }
  #titles .title {
    font-size:42px;
    letter-spacing:2px
  }
  #titles .subtitle {
    font-size:18px;
    letter-spacing:1px
  }
  
  .horizontals {
    stroke-width:1
  }
  .text {
    font-size:20px;
    transform: translate(0px);
  }

}
</style>
<g id="titles">
<!--  heading  -->
  <text class="subtitle" x="58" y="81" width="236" >
    <![CDATA[ January 17th - February 16th ]]>
  </text>
  <text class="title" x="53" y="40" width="406" >
    <![CDATA[ Tweets per day: ‘flappybird’ ]]>
  </text>
</g>
<g id="data">
<!--  graph line and fill  -->
<path id="trendline-filled" d="M 230 422 L 270 420 L 310 418 L 351 418 L 391 409 L 432 402 L 472 385 L 512 374 L 553 216 L 594 323 L 636 320 L 673 329 L 715 326 L 754 279 L 794 278 L 836 242 L 876 229 L 917 141 L 956 213 L 998 157 L 1037 197 L 1078 242 L 1118 294 L 1158 338 L 1199 362 L 1242 384 L 1242 422 L 67 422 Z"/>
<path id="trendline" d="M 67 422 L 107 423 L 147 423 L 189 423 L 230 422 L 270 420 L 310 418 L 351 418 L 391 409 L 432 402 L 472 385 L 512 374 L 553 216 L 594 323 L 636 320 L 673 329 L 715 326 L 754 279 L 794 278 L 836 242 L 876 229 L 917 141 L 956 213 L 998 157 L 1037 197 L 1078 242 L 1118 294 L 1158 338 L 1199 362 L 1242 384 "/>
</g>
<g id="tweet-total-range">
<!--  tweet total marker text  -->
  <text x="20" y="120" width="27"  class="text">
    <![CDATA[ 25k ]]>
  </text>
  <text x="20" y="183" width="27"  class="text">
    <![CDATA[ 20k ]]>
  </text>
  <text x="20" y="246" width="27"  class="text">
    <![CDATA[ 15k ]]>
  </text>
  <text x="20" y="309" width="27"  class="text" >
    <![CDATA[ 10k ]]>
  </text>
  <text x="20" y="372" width="27"  class="text">
    <![CDATA[ 5k ]]>
  </text>
  <text x="20" y="435" width="27"  class="text">
    <![CDATA[ 0k ]]>
  </text>
</g>
<g id="date-range">
<!--  date range text markers  -->
  <text x="114" y="451" width="47"  class="text">
    <![CDATA[ Jan 18 ]]>
  </text>
  <text x="233" y="451" width="47"  class="text">
    <![CDATA[ Jan 21 ]]>
  </text>
  <text x="347" y="451" width="47"  class="text">
    <![CDATA[ Jan 24 ]]>
  </text>
  <text x="459" y="451" width="47"  class="text">
    <![CDATA[ Jan 27 ]]>
  </text>
  <text x="580" y="451" width="47"  class="text">
    <![CDATA[ Jan 29 ]]>
  </text>
  <text x="694" y="451" width="41"  class="text">
    <![CDATA[ Feb 1 ]]>
  </text>
  <text x="811" y="451" width="41"  class="text">
    <![CDATA[ Feb 4 ]]>
  </text>
  <text x="935" y="451" width="41"  class="text">
    <![CDATA[ Feb 7 ]]>
  </text>
  <text x="1052" y="451" width="49"  class="text">
    <![CDATA[ Feb 10 ]]>
  </text>
  <text x="1165" y="451" width="49"  class="text">
    <![CDATA[ Feb 13 ]]>
  </text>
</g>
<g id="graph-base">
  <!--  graph axis and horizontal markers  -->
  <path id="axis" d="M 68 93 L 68 423 L 1240 423 " />
  <path id="20k" d="M 68 168 L 1240 168 " class="horizontals"/>
  <path id="15k" d="M 68 233 L 1240 233 " class="horizontals"/>
  <path id="10k" d="M 68 297 L 1240 297 " class="horizontals"/>
  <path id="5k" d="M 68 360 L 1240 360 " class="horizontals"/>
</g>
</svg>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
@import "compass/css3";

/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Simple Adaptive SVG Demo ) is write by Alex, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Alex