DEV Community

Discussion on: How to Create an Animated SVG Face With CSS

Collapse
 
jwp profile image
John Peters

Excellent Stephanie, any tips on how to debug ViewBox issues, I always have trouble with that part.

Collapse
 
5t3ph profile image
Stephanie Eckles

I am actually pretty novice when it comes to SVG - I learned a lot myself trying to do this face, which is why I wanted to share it as reference :) For viewbox specifically, check out this amazing interactive explainer: wattenberger.com/guide/scaling-svg

Collapse
 
jh3y profile image
Jhey Tompkins

If you set a solid background color to the SVG and then set the overflow to visible. You can see more clearly which parts of the SVG the viewBox is showing ๐Ÿ‘

svg {
  background-color: red;
  overflow: visible;
}
Enter fullscreen mode Exit fullscreen mode