Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replaced duplicate paths in Slack logo to reduce size #164

Merged
merged 4 commits into from Jan 18, 2019

Conversation

tobylyte
Copy link
Collaborator

Made use of the 'use' svg tag and translate rotate to reduce the file size down to 531

Made use of the 'use' svg tag and translate rotate to reduce the file size
@tobylyte tobylyte changed the title Replaced duplicate paths to reduce size Replaced duplicate paths in Slack logo to reduce size Jan 18, 2019
@SelenIT
Copy link
Collaborator

SelenIT commented Jan 18, 2019

It seems that it can be further squeezed to 478 bytes:

<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Slack" role="img"
viewBox="0 0 512 512">
<rect
width="512" height="512"
rx="15%"
fill="#fff"/>
<g fill="#e01e5a"><path id="a" d="M149 305a39 39 0 0 1-78 0c0-22 17-39 39-39h39zM168 305a39 39 0 0 1 78 0v97a39 39 0 0 1-78 0z"/></g>
<use href="#a" fill="#36c5f0" transform="rotate(90,256,256)"/> 
<use href="#a" fill="#2eb67d" transform="rotate(180,256,256)"/>
<use href="#a" fill="#ecb22e" transform="rotate(270,256,256)"/></svg>

@SelenIT
Copy link
Collaborator

SelenIT commented Jan 18, 2019

Sorry, I completely forgot that Safari still doesn't support href without xlink namespace:(

<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink"
aria-label="Slack" role="img" viewBox="0 0 512 512">
<rect width="512" height="512" rx="15%" fill="#fff"/>
<g fill="#e01e5a"><path id="a" d="M149 305a39 39 0 0 1-78 0c0-22 17-39 39-39h39zM168 305a39 39 0 0 1 78 0v97a39 39 0 0 1-78 0z"/></g>
<use x:href="#a" fill="#36c5f0" transform="rotate(90,256,256)"/>
<use x:href="#a" fill="#2eb67d" transform="rotate(180,256,256)"/>
<use x:href="#a" fill="#ecb22e" transform="rotate(270,256,256)"/></svg>

@edent
Copy link
Owner

edent commented Jan 18, 2019

Thanks for this. @tobylyte & @SelenIT - I'm granting you both commit access to the Repo. This is per the advice of The Pull Request Hack.

Please use this privileged wisely.

@edent edent merged commit 1c33dbc into edent:master Jan 18, 2019
romain-dartigues pushed a commit to romain-dartigues/SuperTinyIcons that referenced this pull request Oct 4, 2019
* Replaced duplicate paths to reduce size by adding use
Made use of the 'use' svg tag and translate rotate to reduce the file size

* Updated readme to reflect new Slack logo size

* Removed defs and combined paths

* Updated readme to reflect new Slack icon size
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants