svgcode.md

Working with SVGs

Overview

SVGs are an XML-based markup language.

Tip: Open the SVG file in a TextEdit app to copy the code.

Attributes

Attributes can be used to modify SVGs. Presentation Attributes are CSS properties that can be used as attributes on SVG elements to change its appearance.

Examples:

• fill - changes the color of the SVG elements
• width - changes the size

See all SVG Attributes

---

Issues with Elements

I had an instance where there were a bunch of extraneous <g> </g> tags and the SVG code wasn't rendering the image on a website.

• <g> tags are elements used to group other multiple elements
• <path> is an example of a generic element to create shapes in SVGs

I removed all of the <g> tags except for the opening and closing tags surrounding the <path> elements, and it rendered as expected.

Example Output

Example after adjusting the code and adding attributes:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" fill="#dedede" width="200" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 
<g>
<path d="M204.684,286.487c-7.625-5.464-16.952-8.023-26.298-7.215c-8.846-0.128-17.686,0.534-26.415,1.978v91.113h19.316v-33.047
                c2.208,0.158,4.425,0.158,6.633,0c10.264,0.666,20.367-2.813,28.044-9.658c5.414-5.966,8.258-13.827,7.913-21.876
                C214.06,299.684,210.703,291.908,204.684,286.487z M180.949,323.938c-1.053,0.041-2.108-0.031-3.146-0.214l0.582-0.116
                c-2.165,0.254-4.352,0.254-6.516,0v-27.695c2.63-0.617,5.329-0.891,8.029-0.815c9.775,0,15.244,5.12,15.244,13.498
                C195.459,316.752,189.105,323.621,180.949,323.938z"/>
<path d="M349.091,0h-256C67.385,0,46.545,20.839,46.545,46.545v418.909c0,25.706,20.839,46.545,46.545,46.545h325.818
                c25.706,0,46.545-20.839,46.545-46.545V128L349.091,0z M442.182,465.455c0,12.853-10.42,23.273-23.273,23.273H93.091
                c-12.853,0-23.273-10.42-23.273-23.273V46.545c0-12.853,10.42-23.273,23.273-23.273h209.455v116.364
                c0,12.853,10.419,23.273,23.273,23.273h116.364V465.455z M325.818,139.636V23.273h11.636l104.727,116.364H325.818z"/>
<path d="M283.462,289.862c-10.103-7.643-22.616-11.401-35.258-10.589c-8.844-0.062-17.678,0.6-26.415,1.978v91.113
                c7.328,0.98,14.716,1.446,22.109,1.396c14.235,1.053,28.371-3.08,39.796-11.636c9.946-9.797,15.165-23.418,14.313-37.353
                C298.967,311.487,293.57,298.534,283.462,289.862z M277.411,324.771c-0.116,21.993-11.636,32.349-29.207,32.233v-0.116
                c-2.244,0.224-4.505,0.224-6.749,0v-60.625c2.906-0.614,5.874-0.887,8.844-0.815c14.104-0.991,26.34,9.639,27.331,23.743
                C277.76,321.053,277.687,322.924,277.411,324.771z"/>
<polygon points="314.88,372.364 334.429,372.364 334.429,335.244 365.382,335.244 365.382,318.255 334.429,318.255 
                334.429,297.193 367.593,297.193 367.593,280.087 314.88,280.087          "/>
</g>
 
</svg>

Output: