SVG Icon from Aura Bundle doesn't display in App Builder

Question

So that my Lightning component displays nicely in the App Builder I added a .svg file to the bundle and copy & pasted the SVG from the Lightning Design System Icons.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg height="450" width="450" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path fill="#4bca81" d="m15.2 68.2l14.2-17.2c0.4-0.7 0.4-1.5 0-2.1l-14.2-17c-0.1-0.2-0.2-0.4-0.2-0.6 0-0.6 0.5-1 1-1h20.7c0.6 0 1.1 0.2 1.4 0.7l14.9 18c0.4 0.6 0.4 1.4 0 2.1l-14.8 18c-0.3 0.4-0.9 0.7-1.4 0.7h-20.7c-0.6 0-1-0.4-1-1-0.1-0.2 0-0.5 0.1-0.6z m31.6 0l14.1-17.2c0.4-0.7 0.4-1.5 0-2.1l-14.2-17c-0.1-0.2-0.2-0.4-0.2-0.6 0-0.6 0.5-1 1-1h20.7c0.6 0 1.1 0.2 1.4 0.7l14.9 18c0.4 0.6 0.4 1.4 0 2.1l-14.8 18c-0.3 0.4-0.9 0.7-1.4 0.7h-20.7c-0.6 0-1-0.4-1-1 0-0.2 0.1-0.5 0.2-0.6z"></path>
</svg>

But all I see is a blank white area:

What am I doing wrong and where is a Salesforce documentation on how to add and create such icons?

Answer 1

Update below code in svg and verify.

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <path d="M120,108 C120,114.6 114.6,120 108,120 L12,120 C5.4,120 0,114.6 0,108 L0,12 C0,5.4 5.4,0 12,0 L108,0 C114.6,0 120,5.4 120,12 L120,108 L120,108 Z" id="Shape" fill="#2A739E"/>
    <path d="M77.7383308,20 L61.1640113,20 L44.7300055,63.2000173 L56.0543288,63.2000173 L40,99.623291 L72.7458388,54.5871812 L60.907727,54.5871812 L77.7383308,20 Z" id="Path-1" fill="#FFFFFF"/>
</g>

Answer 2

Did you try to add the following line ?

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

as it is displayed in documentation