Is Svg Responsive. To emulate this responsiveness for the use with CSS path it makes sense to re-create just this algorithm to get from the viewBox or intrinsic size of a source SVG the path data are from to the width and height of the container element you apply the motionpath to. Nowadays more and more websites follows the responsive web design principle.
Here she shares an epic guide to scaling SVG covering all the ways you might want to do that. Amelia has lots of experience with SVG as the co-author of SVG Essentials and author of the upcoming Using SVG with CSS3 and HTML5Amelia and I both will be speaking on SVG at the upcoming RWD Summit as well. Once you have your SVG download the optimized assets here if you like the following steps describe how you make a responsive logo.
As an image you can make a SVG vector illustration scale with the page content as you would any other.
Clean up and optimize the SVG using SVGOMG. PNG files however come in different variations. The easiest way to achieve tints and shades in a responsive SVG is to overlay the shapes with a transparent white or black shape the colour underneath will be linked to a theme colour and the blackwhite mix will create your colour variation. Heres the way I do it when Im making a visualization no jQuery required.
