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.

Sign up for GitHub

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

Jump to bottom

SVGs need to have unique IDs in the entire HTML document #14

Closed
loganmarchione opened this issue May 2, 2023 · 0 comments · Fixed by #15
Closed

SVGs need to have unique IDs in the entire HTML document #14

loganmarchione opened this issue May 2, 2023 · 0 comments · Fixed by #15

Comments

@loganmarchione
Copy link
Owner

loganmarchione commented May 2, 2023 •
edited
Loading

Consider the code below for the Python and Mastodon SVGs.

<!DOCTYPE html>
<html>

<body>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><linearGradient id="b" x1="150.96" x2="112.03" y1="192.35" y2="137.27" gradientTransform="matrix(.24025 0 0 .24257 -6.14 -4.998)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd43b"/><stop offset="1" stop-color="#ffe873"/></linearGradient><linearGradient id="a" x1="26.649" x2="135.66" y1="20.604" y2="114.4" gradientTransform="matrix(.24025 0 0 .24257 -6.14 -4.998)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#5a9fd4"/><stop offset="1" stop-color="#306998"/></linearGradient></defs><path fill="url(#a)" d="M23.717 0a32.697 32.697 0 0 0-5.472.467c-4.846.857-5.725 2.648-5.725 5.953v4.364h11.45v1.455H8.222c-3.328 0-6.243 2-7.154 5.806-1.052 4.362-1.099 7.083 0 11.637.815 3.391 2.757 5.807 6.086 5.807h3.937v-5.234c0-3.78 3.27-7.114 7.154-7.114h11.438c3.184 0 5.725-2.62 5.725-5.818V6.419c0-3.104-2.618-5.436-5.725-5.953a35.717 35.717 0 0 0-5.967-.467zm-6.192 3.51c1.182 0 2.148.983 2.148 2.189a2.164 2.164 0 0 1-2.148 2.176 2.162 2.162 0 0 1-2.15-2.176c0-1.207.962-2.188 2.15-2.188z" transform="translate(.001 .002) scale(.99997)"/><path fill="url(#b)" d="M36.837 12.239v5.085c0 3.942-3.343 7.262-7.153 7.262H18.246c-3.134 0-5.725 2.68-5.725 5.818v10.904c0 3.104 2.698 4.928 5.725 5.819 3.624 1.066 7.1 1.258 11.438 0 2.883-.834 5.725-2.514 5.725-5.819v-4.364H23.97V35.49h17.165c3.327 0 4.567-2.322 5.725-5.806 1.196-3.586 1.144-7.036 0-11.637-.822-3.313-2.393-5.807-5.725-5.807zm-6.433 27.614c1.186 0 2.148.973 2.148 2.175 0 1.208-.96 2.189-2.148 2.189-1.183 0-2.149-.983-2.149-2.19 0-1.201.966-2.174 2.149-2.174z" transform="translate(.001 .002) scale(.99997)"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="url(#a)" d="M73.839 17.49c-1.142-8.488-8.54-15.177-17.31-16.474C55.049.797 49.443 0 36.458 0h-.097c-12.99 0-15.776.797-17.256 1.016-8.526 1.26-16.311 7.271-18.2 15.86-.909 4.23-1.006 8.92-.837 13.221.24 6.169.288 12.326.848 18.47a86.892 86.892 0 0 0 2.022 12.115c1.795 7.36 9.064 13.486 16.186 15.985a43.412 43.412 0 0 0 23.68 1.25 34.565 34.565 0 0 0 2.561-.7c1.91-.607 4.148-1.286 5.793-2.478a.187.187 0 0 0 .075-.144v-5.953a.175.175 0 0 0-.215-.169A65.64 65.64 0 0 1 35.65 70.27c-8.906 0-11.302-4.227-11.988-5.986a18.554 18.554 0 0 1-1.042-4.718.171.171 0 0 1 .136-.177.173.173 0 0 1 .08.001 64.386 64.386 0 0 0 15.116 1.795c1.225 0 2.446 0 3.67-.032 5.121-.144 10.52-.406 15.557-1.39.126-.025.252-.046.36-.078 7.947-1.527 15.51-6.316 16.278-18.445.029-.478.1-5.002.1-5.498.004-1.684.543-11.946-.078-18.25z" transform="translate(1.477) scale(.60759)"/><path fill="#fff" d="M38.69 16.42v12.814h-5.077V16.799c0-2.618-1.09-3.953-3.31-3.953-2.44 0-3.661 1.579-3.661 4.699v6.807h-5.047v-6.807c0-3.12-1.224-4.7-3.664-4.7-2.206 0-3.308 1.336-3.308 3.954v12.435H9.548V16.42c0-2.618.668-4.698 2.005-6.24 1.38-1.538 3.188-2.327 5.433-2.327 2.599 0 4.563.999 5.872 2.995l1.263 2.12 1.266-2.12c1.31-1.996 3.273-2.995 5.867-2.995 2.243 0 4.052.79 5.436 2.327 1.335 1.54 2.002 3.62 2 6.24z"/><defs><linearGradient id="a" x1="37.069" x2="37.069" y2="79" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6364FF"/><stop offset="1" stop-color="#563ACC"/></linearGradient></defs></svg>

</body>

</html>

Mastodon is the same shade of blue as Python, when it should be purple.

Screenshot 2023-05-02 at 01-26-26 W3Schools online HTML editor

When they are viewed in separate HTML documents, they each work fine. This is because the id="a" in Python (which comes first) is being repeated in Mastodon. I think svgo has a plugin to automatically create unique IDs.

Related to svg/svgo#674 and svg/svgo#1746
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Cleanup IDs loganmarchione/homelab-svg-assets
1 participant
@loganmarchione