Skip to content

Instantly share code, notes, and snippets.

@franklinharvey
Created January 5, 2018 17:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save franklinharvey/44e65dda8fc4c0b6104c03321b7e2516 to your computer and use it in GitHub Desktop.
Save franklinharvey/44e65dda8fc4c0b6104c03321b7e2516 to your computer and use it in GitHub Desktop.
A comparison of 100x100 rectangles from Illustrator, Sketch, and Figma in SVG format.

Illustrator:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<g>
	<path d="M99,1v98H1V1H99 M100,0H0v100h100V0L100,0z"/>
</g>
</svg>

Sketch:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
    <title>Rectangle 2</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Desktop" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="Rectangle-2" stroke="#979797" x="0.5" y="0.5" width="99" height="99"></rect>
    </g>
</svg>

Figma:

<svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Rectangle</title>
<desc>Created using Figma</desc>
<g id="Canvas">
<g id="Rectangle">
<mask id="mask0_outline_ins">
<use xlink:href="#path0_fill" fill="white" transform="translate(0 1.42109e-14)"/>
</mask>
<g mask="url(#mask0_outline_ins)">
<use xlink:href="#path1_stroke_2x" transform="translate(0 1.42109e-14)" fill="#C4C4C4"/>
</g>
</g>
</g>
<defs>
<path id="path0_fill" d="M 0 0L 100 0L 100 100L 0 100L 0 0Z"/>
<path id="path1_stroke_2x" d="M 0 0L 0 -1L -1 -1L -1 0L 0 0ZM 100 0L 101 0L 101 -1L 100 -1L 100 0ZM 100 100L 100 101L 101 101L 101 100L 100 100ZM 0 100L -1 100L -1 101L 0 101L 0 100ZM 0 1L 100 1L 100 -1L 0 -1L 0 1ZM 99 0L 99 100L 101 100L 101 0L 99 0ZM 100 99L 0 99L 0 101L 100 101L 100 99ZM 1 100L 1 0L -1 0L -1 100L 1 100Z"/>
</defs>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment