<article id="webslides">
<section class="bg-gradient-r aligncenter">
<h1>Why SVG Is the Future of Web Graphics?</h1>
</section>
<section>
<div class="wrap">
<div class="content-left">
<h2>What Is SVG?</h2>
<p class="text-subtitle">Scalable Vector Graphics</p>
<hr>
<p class="text-intro">SVG is an XML-based vector graphic format used to display a wide range of graphics on the Web.</p>
<p class="text-intro">SVG documents are just plain text files and can be created and edited in every text editor.</p>
</div>
<div class="content-right">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/traffic-lights.png">
</div>
</div>
</section>
<section class="aligncenter">
<h2>SVG Is Future-Proof</h2>
<p class="text-subtitle">As long as the W3C sets the global industry standards, it seems that SVG will continue to be the de-facto standard for vector graphics in the browser.</p>
<hr>
<div class="grid">
<div class="column">
<p class="text-intro" style="text-align: left">SVG is a W3C standard. This makes SVG future-proof. Technologies are rapidly changing. What’s here today could be gone tomorrow. But SVG will most likely be around for a long time.</p>
</div>
<div class="column">
<figure class="browser">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/standard.png">
</figure>
</div>
</div>
</section>
<section>
<h2 class="aligncenter">SVG Is the Best Graphic Format for Web</h2>
<hr>
<div class="grid">
<div class="column">
<p class="text-intro">What makes SVG so preferable for Web is its remarkable usefulness and unlimited flexibility. It's the only one graphic format which most closely and completely responds to the current web development demands such as <em>scalability, responsibility, interactivity, programmability, and accessibility</em>.</p>
</div>
<div class="column">
<p class="text-intro">As a graphic format SVG perfectly suits the Web needs because it satisfies both designers and developers. An illustration can be easily created by a designer with any vector software, and then, the exported SVG can be transferred to a developer who can add animation or some other interactivity.</p>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="content-left">
<h2>SVG Usage Is Growing</h2>
<p class="text-subtitle">Over the last year SVG usage has doubled.</p>
<hr>
<p>As of 2014 SVG usage is growing continuously (image below) and it has doubled over the last year (right image).</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/svg-usage-numbers.png">
</div>
<div class="content-right">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/svg-usage.png">
</div>
</div>
</section>
<section class="aligncenter bg-black">
<span class="background" style="background-image:url('https://source.unsplash.com/ICW6QYOcdlg/800x600')"></span>
<div class="wrap">
<h2 class="bg-trans-light"><em>SVG Solves the Most Important Problems in Modern Web Development</em></h2>
</div>
</section>
<section class="slideInRight">
<div class="wrap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/responsive.jpg" class="alignright size-40">
<h3>1. Scalability</h3>
<p class="text-subtitle">SVG is like an infinity scalable canvas</p>
<p>Because of its vector nature a SVG drawing can scale and adapt to any size without loosing sharpness. In contrast, raster-based formats, such as GIF, JPG, and PNG, are static and have fixed dimensions. Although retina screen and other techniques for responsive images are good they still can not compete with the SVG's ability to scale infinitely. No matter what device you use SVG will adapt and scale perfectly preserving the graphic's visual appearance intact.</p>
</div>
</section>
<section class="slideInRight">
<div class="wrap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/interactivity.jpg" class="alignright size-40">
<h3>2. Interactivity</h3>
<p class="text-subtitle">SVG Drawings are dynamic and interactive</p>
<p>SVG is fully scriptable. It can be manipulated with CSS and/or JavaScript. A SVG graphic can be animated and can respond to any user actions.</p>
</div>
</section>
<section class="slideInRight">
<div class="wrap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/svg-market-position.png" class="alignright size-40">
<h3>3. Performance</h3>
<p class="text-subtitle">SVG is preferred image format for high traffic sites</p>
<p>Because SVG is just a plain text in most of the cases the file size will be smaller compared to its bitmap counterparts (JPEG and PNG). So the impact on the web page performance will be minimized.</p>
</div>
</section>
<section class="slideInRight">
<div class="wrap">
<div class="content-left">
<h3>4. Accessibility</h3>
<p class="text-subtitle">SVG text is real and editable</p>
<p style="font-size: 1.8rem; line-height: 3.2rem">SVG files are text-based and do can be searched and indexed. This make them readable by screen readers, search engines and other devices. The ability of SVG to bring visuals to those who cannot see it extends its reach into many domains that pixel-based graphics just cannot go.</p>
</div>
<div class="content-right">
<div class="wrap size-80">
<pre><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
<text x="10" y="20">SVG offers real and editable text</text>
</svg>
</pre>
</div>
</div>
</div>
</section>
<section class="aligncenter">
<h2>SVG Has Very Good Browser Support</h2>
<p class="text-subtitle">The browser support for SVG is 97% and above</p>
<hr>
<div class="wrap">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/caniuse.png">
</div>
</section>
<section>
<h2>SVG Has Many Different Use Cases</h2>
<hr>
<ul class="flexblock gallery">
<li>
<a href="#">
<figure>
<img alt="Thumbnail" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/illustration.jpg">
<figcaption>
<h2>Plain Illustrations</h2>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img alt="Thumbnail " src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/icons.jpg">
<figcaption>
<h2>Logos and Icons</h2>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img alt="Thumbnail" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/animation.jpg">
<figcaption>
<h2>Animations</h2>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img alt="Thumbnail" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/charts.jpg">
<figcaption>
<h2>Charts and Graphs</h2>
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#">
<figure>
<img alt="Thumbnail" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/interface.jpg">
<figcaption>
<h2>User Interfaces</h2>
</figcaption>
</figure>
</a>
</li>
</ul>
</section>
<section>
<h2>SVG Workflow Is Straightforward</h2>
<hr>
<ul class="flexblock steps">
<li>
<span>
<svg class="fa-file-image-o">
<use xlink:href="#fa-file-image-o"></use>
</svg>
</span>
<h2>01. Draw</h2>
<p>Draw a graphic in vector editing program such as Adobe Illustrator</p>
</li>
<li>
<div class="process step-2"></div>
<span>
<svg class="fa-file-code-o">
<use xlink:href="#fa-file-code-o"></use>
</svg>
</span>
<h2>02. Export</h2>
<p>Export the drawing as a SVG file</p>
</li>
<li>
<div class="process step-3"></div>
<span>
<svg class="fa-cogs">
<use xlink:href="#fa-cogs"></use>
</svg>
</span>
<h2>03. Optimize</h2>
<p>Further optimize the exported SVG with tool such as SVGO (if needed)</p>
</li>
<li>
<div class="process step-4"></div>
<span>
<svg class="fa-picture-o">
<use xlink:href="#fa-picture-o"></use>
</svg>
</span>
<h2>04. Use</h2>
<p>Use the final SVG file on a website</p>
</li>
</ul>
</section>
<section class="zoomIn bg-black">
<span class="background" style="background-image:url('https://source.unsplash.com/fPkvU7RDmCo/800x600')"></span>
<div class="wrap">
<h2 class="aligncenter">Start Coding SVG Today!</h2>
</div>
</section>
</article>
