Hey guys,
I’m designing a chart in Illustrator and will export it in SVG. Is there some way to make it responsive so that the result acts as the following animation? i.e.: circles won’t distort and lines will keep the stroke size after the screen reducing. If I have to edit the SVG generated by Illustrator, it’s quite OK. Thanks in advance!
Hi @alvarobeleza,
Yes! Definitely create this in Illustrator. Animating individual objects like this will cause all kinds of headaches. Simply create a full graphic, export as SVG, then add to canvas - INSIDE OF A DIV with a Display size set. Either % or VW.
No need to use Height that will just throw off the graphic.
After adding inside the Div, set the graphic display to Width: 100%, and you’re done. Then animate with a Scale, not size.
See ya 
Thank you very much for your response. I think I wasn’t very clear. Actually, I’d not like to create an animation. I’d just like to create an SVG that will be responsive without distorting the paths and dots.
Cheers!
Yep, I hear ya. That SVG will be responsive without distorting it. All you have to do is make sure it’s not set to Relative while inside a Div with other elements.
I’d recommend putting it inside it’s own Div and place that Div under other content - and set the Div to Absolute (Set the outer most wrapper to Relative of course). If you give that parent Div a % or VW, it will scale based on the screen size. So do a best guess to try and match your layout.
This way you can control the size and spacing to flow with the content in front of it (if need be).
See ya
Thanks again for the attention, @garymichael1313.
Unfortunately, it didn’t work, as I fixed the height and let the width flexible with the device. So the SVG got distorted.
But I figured out another solution that worked. Instead of circles, I’m using a very short line with round linecap and thick stroke. So it looks like a circle. Then, I edited the SVG as the following:
width and height from <svg>.preserveAspectRatio="none" to <svg> so that both width and height become independent.path, line {vector-effect: non-scaling-stroke} to the <style> to avoid distortion in the lines and paths strokes when the size changes. (that’s the reason I’m using lines simulating circles)This is the result:
The code is here: SVG responsive chart - Pastebin.com
Excellent! Great workaround.