What is the optimal SVG viewBox size for web applications?
Background
While creating SVG icons for my web application, I noted that the two most common viewBox sizes others seem to design around are 0 0 20 20 (for solid icons) and 0 0 24 24 (for outline icons).
Ideally, I would like to like to standardize on one viewBox size for my app and am trying to understand any best practices that already exist.
Is there a currently or generally accepted 'best practice' sizing for the viewBox when creating SVGs for web applications?
Solution
There is no best practice; the viewBox is your definition, the DOM element size will be the same
example: It is up to you if you draw in viewBox="0 0 5 5" or viewBox="0 0 25 25" 'accuracy'
- After increasing the stroke-width attribute, the icon is cropped
- How to find correct values for width, height and viewBox with react-native-svg
- Scaling the filling portion of an SVG path
- How to calculate the SVG Path for an arc (of a circle)
- 'Error: Plugin name should be specified' @svgr/webpack svgoConfig
- Having trouble nonuniformly scaling feImage from data uri in svg
- How can I have an SVG polyline points in percentages?
- SVG Draw a circle with 4 sectors
- Linear gradients in SVG without defs
- How can I change the color of an 'svg' element?
- How to wrap the text around svg in flutter?
- React Native SVG stacking circles not showing inner half
- Why doesn't hue rotation by +180deg and -180deg yield the original color?
- Can I make one SVG filter with multiple effects?
- Get absolute coordinates of element inside SVG using JS
- Move stroke gradient definition from SVG to CSS
- Doughnut chart with rounded corners - is it possible?
- How can I draw an SVG over what already exists in a canvas?
- How can I change the color of the svg?
- Overlaying a div with an svg using CSS grid layout when div size is unknown ahead of time
- Animate SVG along path horizontally responsive
- How to embed AI (Adobe Illustrator) / SVG / PDF files into a PDF directly in iText Java to avoid rendering glitch?
- Some SVGs work in Nextjs and some not, why?
- Change color of svg ( icon) via css in angular 8
- SVG: How can I display multiple paths and rotate them around the center?
- Different results based on browser when drawing an SVG Icon
- Right mime type for SVG images with fonts embedded
- Type 'string' is not assignable to type 'ImageSourcePropType'
- SVG Scaling Text to fit container
- SVG Bezier path connecting two divs