<h1>Size your SVGs!</h1>

<p>Setting  default size for your inline SVGs is key to ensuring your pages don’t look like hot garbage when resources like your CSS fail to load</p>

<h2>Example: No inline dimensions, no CSS applied</h2>

<figure>
<svg viewBox="0 0 100 87" xmlns="http://www.w3.org/2000/svg"><style></style><g fill="#000" fill-rule="evenodd"><path d="M81 6c0 3.3-3.15 6-7 6H7c-3.85 0-7-2.7-7-6s3.15-6 7-6h67c3.85 0 7 2.7 7 6zM56 81c0 3.3-3.15 6-7 6H7c-3.85 0-7-2.7-7-6s3.15-6 7-6h42c3.85 0 7 2.7 7 6zM100 24.5c0 3.575-3.15 6.5-7 6.5H7c-3.85 0-7-2.925-7-6.5S3.15 18 7 18h86c3.85 0 7 2.925 7 6.5zM100 43.5c0 3.575-3.15 6.5-7 6.5H7c-3.85 0-7-2.925-7-6.5S3.15 37 7 37h86c3.85 0 7 2.925 7 6.5zM100 62c0 3.3-3.15 6-7 6H7c-3.85 0-7-2.7-7-6s3.15-6 7-6h86c3.85 0 7 2.7 7 6z"></path></g></svg>
</figure>

<h2>Example: With inline dimensions, no CSS applied</h2>

<figure>
<svg height="20" viewBox="0 0 100 87" width="24" xmlns="http://www.w3.org/2000/svg"><style></style><g fill="#000" fill-rule="evenodd"><path d="M81 6c0 3.3-3.15 6-7 6H7c-3.85 0-7-2.7-7-6s3.15-6 7-6h67c3.85 0 7 2.7 7 6zM56 81c0 3.3-3.15 6-7 6H7c-3.85 0-7-2.7-7-6s3.15-6 7-6h42c3.85 0 7 2.7 7 6zM100 24.5c0 3.575-3.15 6.5-7 6.5H7c-3.85 0-7-2.925-7-6.5S3.15 18 7 18h86c3.85 0 7 2.925 7 6.5zM100 43.5c0 3.575-3.15 6.5-7 6.5H7c-3.85 0-7-2.925-7-6.5S3.15 37 7 37h86c3.85 0 7 2.925 7 6.5zM100 62c0 3.3-3.15 6-7 6H7c-3.85 0-7-2.7-7-6s3.15-6 7-6h86c3.85 0 7 2.7 7 6z"></path></g></svg>
</figure>

<h2>Example: With inline dimensions and CSS applied</h2>

<figure class="styled">
<svg height="20" viewBox="0 0 100 87" width="24" xmlns="http://www.w3.org/2000/svg"><style></style><g fill="#000" fill-rule="evenodd"><path d="M81 6c0 3.3-3.15 6-7 6H7c-3.85 0-7-2.7-7-6s3.15-6 7-6h67c3.85 0 7 2.7 7 6zM56 81c0 3.3-3.15 6-7 6H7c-3.85 0-7-2.7-7-6s3.15-6 7-6h42c3.85 0 7 2.7 7 6zM100 24.5c0 3.575-3.15 6.5-7 6.5H7c-3.85 0-7-2.925-7-6.5S3.15 18 7 18h86c3.85 0 7 2.925 7 6.5zM100 43.5c0 3.575-3.15 6.5-7 6.5H7c-3.85 0-7-2.925-7-6.5S3.15 37 7 37h86c3.85 0 7 2.925 7 6.5zM100 62c0 3.3-3.15 6-7 6H7c-3.85 0-7-2.7-7-6s3.15-6 7-6h86c3.85 0 7 2.7 7 6z"></path></g></svg>
</figure>

<p>Your inline sizes can still be overridden by CSS, so please don’t forget to include them.</p>

body {
  padding: 0 1rem;
}

.styled svg {
  inline-size: 200px;
  block-size: 200px;
}