TechPrufer
Get started
Shopify
Shopify logoShopify · Feature trail

SVG Graphics and Animation

1 post · Feb 2015

What this trail covers

Shopify leverages SVG for dynamic and interactive web graphics, including animated charts with d3.js, self-drawing paths using stroke-dashoffset, and responsive SVG implementations via viewBox and CSS hacks. SVG is also used for complex typographic treatments and patterned backgrounds, often generated server-side with Rails helpers. The technology is presented as a powerful and flexible alternative to CSS for web graphics.

All Shopify trails
  1. Building Year in Review 2014 with SVG and Rails - ShopifyThis post details the use of SVG for creating animated charts with d3.js, animating SVG paths using stroke-dashoffset, implementing responsive SVGs with viewBox and CSS padding-bottom hacks, creating offset SVG text with multiple text elements, and using SVG patterns for backgrounds. It also highlights the generation of SVG code using server-side technologies like Ruby and ERB.