<svg style="display:none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>dbushell.com social icons</title>
<desc>Test case SVG with correct viewBox attributes</desc>
<symbol id="twitter" viewBox="0 0 34 28">
<path d="M33.945 3.315c-1.246.562-2.586.941-3.992 1.112 1.438-.875 2.54-2.259 3.059-3.912-1.344.812-2.832 1.399-4.416 1.716-1.269-1.373-3.076-2.231-5.075-2.231-3.842 0-6.953 3.166-6.953 7.068 0 .553.06 1.094.179 1.612-5.779-.295-10.904-3.109-14.333-7.387-.6 1.045-.94 2.258-.94 3.554 0 2.454 1.227 4.616 3.093 5.883-1.142-.035-2.213-.354-3.15-.882v.087c0 3.424 2.396 6.283 5.579 6.932-.584.16-1.199.248-1.831.248-.449 0-.886-.045-1.311-.129.887 2.81 3.454 4.854 6.496 4.912-2.379 1.896-5.378 3.023-8.638 3.023-.561 0-1.113-.033-1.657-.098 3.078 2.008 6.731 3.177 10.658 3.177 12.791 0 19.785-10.768 19.785-20.11 0-.306-.007-.611-.02-.914 1.359-.999 2.536-2.244 3.467-3.661z"/>
</symbol>
<symbol id="github" viewBox="0 0 28 28">
<path d="M14 0C6.27 0 0 6.427 0 14.355c0 6.34 4.01 11.72 9.575 13.62.7.133.956-.312.956-.69 0-.34-.01-1.243-.017-2.44-3.894.866-4.716-1.926-4.716-1.926-.637-1.66-1.554-2.1-1.554-2.1-1.27-.892.096-.874.096-.874 1.404.102 2.144 1.48 2.144 1.48 1.25 2.192 3.277 1.56 4.075 1.19.126-.927.49-1.56.89-1.92-3.11-.36-6.38-1.593-6.38-7.092 0-1.567.546-2.848 1.44-3.852-.144-.363-.625-1.822.137-3.798 0 0 1.175-.387 3.85 1.47 1.117-.317 2.314-.478 3.505-.482 1.19.005 2.387.165 3.506.483 2.672-1.858 3.846-1.47 3.846-1.47.765 1.975.283 3.434.14 3.797.897 1.003 1.44 2.285 1.44 3.852 0 5.514-3.273 6.727-6.394 7.083.504.442.95 1.32.95 2.658 0 1.92-.017 3.467-.017 3.938 0 .385.252.83.963.69 5.557-1.9 9.564-7.28 9.564-13.617C28 6.426 21.73 0 14 0z"/>
</symbol>
<symbol id="codepen" viewBox="0 0 28 28">
<path d="M8.693 14l-1.86 1.245v-2.49L8.692 14zm4.564-3.052v-3.47l-5.83 3.886 2.605 1.74 3.225-2.156zm7.316.416l-5.83-3.886v3.47l3.227 2.157 2.603-1.74zM7.428 16.637l5.83 3.886v-3.47l-3.227-2.157-2.602 1.74zm7.316.416v3.47l5.83-3.886-2.605-1.74-3.226 2.156zM14 12.24L11.37 14 14 15.76 16.632 14 14 12.24zM28 14c0 7.732-6.268 14-14 14-7.73 0-14-6.268-14-14C0 6.27 6.27 0 14 0c7.732 0 14 6.27 14 14zm-5.343-2.637c0-.033-.003-.065-.007-.098l-.006-.032c-.004-.02-.008-.042-.014-.062l-.012-.035c-.006-.018-.012-.036-.02-.054-.004-.012-.01-.023-.016-.035l-.025-.05-.02-.034c-.01-.015-.02-.03-.032-.044-.008-.012-.017-.022-.025-.032l-.037-.04-.03-.03-.042-.035c-.01-.01-.02-.018-.032-.026l-.013-.01-7.912-5.274c-.25-.166-.575-.166-.825 0l-7.912 5.275c-.005.003-.01.006-.013.01l-.033.024c-.015.01-.03.022-.042.035l-.03.03c-.013.012-.025.025-.037.04l-.024.03-.03.046c-.01.012-.016.023-.022.035-.01.017-.018.032-.025.05-.007.012-.013.023-.018.036l-.02.055c-.004.013-.008.024-.01.036-.007.022-.01.043-.015.063 0 .01-.004.02-.006.032-.003.032-.006.064-.006.098v5.274c0 .033.003.065.007.098.003.01.006.02.007.032.004.02.008.04.014.062l.012.035c.006.02.013.037.02.055.005.013.01.024.017.036.007.017.016.033.024.05l.02.034c.01.016.022.03.032.045.008.012.017.02.025.032l.038.04.03.03c.013.012.027.023.042.034.01.01.02.02.033.027l.013.01 7.912 5.274c.125.084.27.126.412.126.145 0 .288-.042.413-.125l7.912-5.274.013-.01.033-.025c.016-.01.03-.02.044-.034l.03-.03c.012-.012.024-.025.036-.04.01-.01.018-.02.025-.03.012-.016.02-.03.03-.046.01-.012.016-.022.022-.034.01-.017.018-.033.025-.05.005-.012.012-.023.017-.036l.018-.055c.004-.012.01-.023.012-.036.006-.022.01-.042.014-.063l.006-.032c.004-.032.007-.064.007-.098v-5.274zm-1.488 3.882v-2.49L19.307 14l1.86 1.245z"/>
</symbol>
</svg>
<svg style="display:none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>dbushell.com social icons</title>
<desc>Test case SVG with lowercase viewBox attributes</desc>
<symbol id="twitter-2" viewbox="0 0 34 28">
<path d="M33.945 3.315c-1.246.562-2.586.941-3.992 1.112 1.438-.875 2.54-2.259 3.059-3.912-1.344.812-2.832 1.399-4.416 1.716-1.269-1.373-3.076-2.231-5.075-2.231-3.842 0-6.953 3.166-6.953 7.068 0 .553.06 1.094.179 1.612-5.779-.295-10.904-3.109-14.333-7.387-.6 1.045-.94 2.258-.94 3.554 0 2.454 1.227 4.616 3.093 5.883-1.142-.035-2.213-.354-3.15-.882v.087c0 3.424 2.396 6.283 5.579 6.932-.584.16-1.199.248-1.831.248-.449 0-.886-.045-1.311-.129.887 2.81 3.454 4.854 6.496 4.912-2.379 1.896-5.378 3.023-8.638 3.023-.561 0-1.113-.033-1.657-.098 3.078 2.008 6.731 3.177 10.658 3.177 12.791 0 19.785-10.768 19.785-20.11 0-.306-.007-.611-.02-.914 1.359-.999 2.536-2.244 3.467-3.661z"/>
</symbol>
<symbol id="github-2" viewbox="0 0 28 28">
<path d="M14 0C6.27 0 0 6.427 0 14.355c0 6.34 4.01 11.72 9.575 13.62.7.133.956-.312.956-.69 0-.34-.01-1.243-.017-2.44-3.894.866-4.716-1.926-4.716-1.926-.637-1.66-1.554-2.1-1.554-2.1-1.27-.892.096-.874.096-.874 1.404.102 2.144 1.48 2.144 1.48 1.25 2.192 3.277 1.56 4.075 1.19.126-.927.49-1.56.89-1.92-3.11-.36-6.38-1.593-6.38-7.092 0-1.567.546-2.848 1.44-3.852-.144-.363-.625-1.822.137-3.798 0 0 1.175-.387 3.85 1.47 1.117-.317 2.314-.478 3.505-.482 1.19.005 2.387.165 3.506.483 2.672-1.858 3.846-1.47 3.846-1.47.765 1.975.283 3.434.14 3.797.897 1.003 1.44 2.285 1.44 3.852 0 5.514-3.273 6.727-6.394 7.083.504.442.95 1.32.95 2.658 0 1.92-.017 3.467-.017 3.938 0 .385.252.83.963.69 5.557-1.9 9.564-7.28 9.564-13.617C28 6.426 21.73 0 14 0z"/>
</symbol>
<symbol id="codepen-2" viewbox="0 0 28 28">
<path d="M8.693 14l-1.86 1.245v-2.49L8.692 14zm4.564-3.052v-3.47l-5.83 3.886 2.605 1.74 3.225-2.156zm7.316.416l-5.83-3.886v3.47l3.227 2.157 2.603-1.74zM7.428 16.637l5.83 3.886v-3.47l-3.227-2.157-2.602 1.74zm7.316.416v3.47l5.83-3.886-2.605-1.74-3.226 2.156zM14 12.24L11.37 14 14 15.76 16.632 14 14 12.24zM28 14c0 7.732-6.268 14-14 14-7.73 0-14-6.268-14-14C0 6.27 6.27 0 14 0c7.732 0 14 6.27 14 14zm-5.343-2.637c0-.033-.003-.065-.007-.098l-.006-.032c-.004-.02-.008-.042-.014-.062l-.012-.035c-.006-.018-.012-.036-.02-.054-.004-.012-.01-.023-.016-.035l-.025-.05-.02-.034c-.01-.015-.02-.03-.032-.044-.008-.012-.017-.022-.025-.032l-.037-.04-.03-.03-.042-.035c-.01-.01-.02-.018-.032-.026l-.013-.01-7.912-5.274c-.25-.166-.575-.166-.825 0l-7.912 5.275c-.005.003-.01.006-.013.01l-.033.024c-.015.01-.03.022-.042.035l-.03.03c-.013.012-.025.025-.037.04l-.024.03-.03.046c-.01.012-.016.023-.022.035-.01.017-.018.032-.025.05-.007.012-.013.023-.018.036l-.02.055c-.004.013-.008.024-.01.036-.007.022-.01.043-.015.063 0 .01-.004.02-.006.032-.003.032-.006.064-.006.098v5.274c0 .033.003.065.007.098.003.01.006.02.007.032.004.02.008.04.014.062l.012.035c.006.02.013.037.02.055.005.013.01.024.017.036.007.017.016.033.024.05l.02.034c.01.016.022.03.032.045.008.012.017.02.025.032l.038.04.03.03c.013.012.027.023.042.034.01.01.02.02.033.027l.013.01 7.912 5.274c.125.084.27.126.412.126.145 0 .288-.042.413-.125l7.912-5.274.013-.01.033-.025c.016-.01.03-.02.044-.034l.03-.03c.012-.012.024-.025.036-.04.01-.01.018-.02.025-.03.012-.016.02-.03.03-.046.01-.012.016-.022.022-.034.01-.017.018-.033.025-.05.005-.012.012-.023.017-.036l.018-.055c.004-.012.01-.023.012-.036.006-.022.01-.042.014-.063l.006-.032c.004-.032.007-.064.007-.098v-5.274zm-1.488 3.882v-2.49L19.307 14l1.86 1.245z"/>
</symbol>
</svg>
<svg style="display:none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>dbushell.com social icons</title>
<desc>Test case SVG with missing viewBox attributes</desc>
<symbol id="twitter-3">
<path d="M33.945 3.315c-1.246.562-2.586.941-3.992 1.112 1.438-.875 2.54-2.259 3.059-3.912-1.344.812-2.832 1.399-4.416 1.716-1.269-1.373-3.076-2.231-5.075-2.231-3.842 0-6.953 3.166-6.953 7.068 0 .553.06 1.094.179 1.612-5.779-.295-10.904-3.109-14.333-7.387-.6 1.045-.94 2.258-.94 3.554 0 2.454 1.227 4.616 3.093 5.883-1.142-.035-2.213-.354-3.15-.882v.087c0 3.424 2.396 6.283 5.579 6.932-.584.16-1.199.248-1.831.248-.449 0-.886-.045-1.311-.129.887 2.81 3.454 4.854 6.496 4.912-2.379 1.896-5.378 3.023-8.638 3.023-.561 0-1.113-.033-1.657-.098 3.078 2.008 6.731 3.177 10.658 3.177 12.791 0 19.785-10.768 19.785-20.11 0-.306-.007-.611-.02-.914 1.359-.999 2.536-2.244 3.467-3.661z"/>
</symbol>
<symbol id="github-3">
<path d="M14 0C6.27 0 0 6.427 0 14.355c0 6.34 4.01 11.72 9.575 13.62.7.133.956-.312.956-.69 0-.34-.01-1.243-.017-2.44-3.894.866-4.716-1.926-4.716-1.926-.637-1.66-1.554-2.1-1.554-2.1-1.27-.892.096-.874.096-.874 1.404.102 2.144 1.48 2.144 1.48 1.25 2.192 3.277 1.56 4.075 1.19.126-.927.49-1.56.89-1.92-3.11-.36-6.38-1.593-6.38-7.092 0-1.567.546-2.848 1.44-3.852-.144-.363-.625-1.822.137-3.798 0 0 1.175-.387 3.85 1.47 1.117-.317 2.314-.478 3.505-.482 1.19.005 2.387.165 3.506.483 2.672-1.858 3.846-1.47 3.846-1.47.765 1.975.283 3.434.14 3.797.897 1.003 1.44 2.285 1.44 3.852 0 5.514-3.273 6.727-6.394 7.083.504.442.95 1.32.95 2.658 0 1.92-.017 3.467-.017 3.938 0 .385.252.83.963.69 5.557-1.9 9.564-7.28 9.564-13.617C28 6.426 21.73 0 14 0z"/>
</symbol>
<symbol id="codepen-3">
<path d="M8.693 14l-1.86 1.245v-2.49L8.692 14zm4.564-3.052v-3.47l-5.83 3.886 2.605 1.74 3.225-2.156zm7.316.416l-5.83-3.886v3.47l3.227 2.157 2.603-1.74zM7.428 16.637l5.83 3.886v-3.47l-3.227-2.157-2.602 1.74zm7.316.416v3.47l5.83-3.886-2.605-1.74-3.226 2.156zM14 12.24L11.37 14 14 15.76 16.632 14 14 12.24zM28 14c0 7.732-6.268 14-14 14-7.73 0-14-6.268-14-14C0 6.27 6.27 0 14 0c7.732 0 14 6.27 14 14zm-5.343-2.637c0-.033-.003-.065-.007-.098l-.006-.032c-.004-.02-.008-.042-.014-.062l-.012-.035c-.006-.018-.012-.036-.02-.054-.004-.012-.01-.023-.016-.035l-.025-.05-.02-.034c-.01-.015-.02-.03-.032-.044-.008-.012-.017-.022-.025-.032l-.037-.04-.03-.03-.042-.035c-.01-.01-.02-.018-.032-.026l-.013-.01-7.912-5.274c-.25-.166-.575-.166-.825 0l-7.912 5.275c-.005.003-.01.006-.013.01l-.033.024c-.015.01-.03.022-.042.035l-.03.03c-.013.012-.025.025-.037.04l-.024.03-.03.046c-.01.012-.016.023-.022.035-.01.017-.018.032-.025.05-.007.012-.013.023-.018.036l-.02.055c-.004.013-.008.024-.01.036-.007.022-.01.043-.015.063 0 .01-.004.02-.006.032-.003.032-.006.064-.006.098v5.274c0 .033.003.065.007.098.003.01.006.02.007.032.004.02.008.04.014.062l.012.035c.006.02.013.037.02.055.005.013.01.024.017.036.007.017.016.033.024.05l.02.034c.01.016.022.03.032.045.008.012.017.02.025.032l.038.04.03.03c.013.012.027.023.042.034.01.01.02.02.033.027l.013.01 7.912 5.274c.125.084.27.126.412.126.145 0 .288-.042.413-.125l7.912-5.274.013-.01.033-.025c.016-.01.03-.02.044-.034l.03-.03c.012-.012.024-.025.036-.04.01-.01.018-.02.025-.03.012-.016.02-.03.03-.046.01-.012.016-.022.022-.034.01-.017.018-.033.025-.05.005-.012.012-.023.017-.036l.018-.055c.004-.012.01-.023.012-.036.006-.022.01-.042.014-.063l.006-.032c.004-.032.007-.064.007-.098v-5.274zm-1.488 3.882v-2.49L19.307 14l1.86 1.245z"/>
</symbol>
</svg>
<div class="icons">
<p>Icons with correct <code>viewBox</code> attribute:</p>
<svg class="icon" role="presentation">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use>
</svg>
<svg class="icon" role="presentation">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use>
</svg>
<svg class="icon" role="presentation">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#codepen"></use>
</svg>
</div>
<div class="icons">
<p>Icons with missing <code>viewBox</code> attribute (not scaling):</p>
<svg class="icon" role="presentation">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-3"></use>
</svg>
<svg class="icon" role="presentation">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github-3"></use>
</svg>
<svg class="icon" role="presentation">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#codepen-3"></use>
</svg>
</div>
<div class="icons">
<p>Icons with lowercase <code>viewbox</code> attribute:</p>
<svg class="icon" role="presentation">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-2"></use>
</svg>
<svg class="icon" role="presentation">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github-2"></use>
</svg>
<svg class="icon" role="presentation">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#codepen-2"></use>
</svg>
</div>
<p>Running <a href="https://github.com/svg/svgo">SVGO</a> as default will remove <code><symbol></code> elements.</p>
<p>We need to use <code>--disable=cleanupIDs</code> to retain the <code><symbol></code>s.</p>
<pre><code>svgo icons.svg --disable=cleanupIDs</code></pre>
<p>However, if you use a lowercase <code>viewbox</code> attribute it will be removed by SVGO.</p>
<p>With no <code>viewBox</code> browsers will not scale the icon with CSS <code>width</code> and <code>height</code> properties.</p>
<p><b>See my article <a target="_blank" href="http://dbushell.com/2016/03/01/be-careful-with-your-viewbox/">Be careful with your viewBox</a> for more information.</b></p>
body {
padding: 30px;
}
p {
margin: 0 0 15px 0;
}
.icon {
display: inline-block;
width: 60px;
height: 60px;
fill: #ff6680;
}
.icons {
margin-bottom: 20px;
}
code {
background: #fffbcc;
}
pre {
background: #fffbcc;
padding: 20px;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.