starred/flag-icons

Fork 0

mirror of https://github.com/lipis/flag-icons.git synced 2026-04-26 01:15:55 +03:00

[GH-ISSUE #1045] Non unique ids cause rendering collisions when svgs are inlined #492

New issue

Closed

opened 2026-03-03 14:38:46 +03:00 by kerem · 5 comments

kerem commented

2026-03-03 14:38:46 +03:00

Owner

Originally created by @vovayatsyuk on GitHub (Oct 18, 2022).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/1045

Some flags are corrupted when SVG icons are inlined into the page HTML.

Codepen: https://codepen.io/vovayatsyuk/pen/eYrPXgW?editors=1000

At the initial page load, the Honduras flag is corrupted.
When changing sort order by clicking on the table header Cameroon and Indian flags get corrupted.

Screenshot:

Possible solution

Use unique ids to prevent collisions. I've already done that in my laravel package

If you are interested in this change I'll open PR with updated icons.

Originally created by @vovayatsyuk on GitHub (Oct 18, 2022). Original GitHub issue: https://github.com/lipis/flag-icons/issues/1045 Some flags are corrupted when SVG icons are inlined into the page HTML. Codepen: https://codepen.io/vovayatsyuk/pen/eYrPXgW?editors=1000 1. At the initial page load, the Honduras flag is corrupted. 2. When changing sort order by clicking on the table header Cameroon and Indian flags get corrupted. Screenshot: <img width="300" height="400" alt="Screenshot" src="https://user-images.githubusercontent.com/306080/194756444-6d9b0966-4cf7-4186-9099-801ae06190a2.png"> ### Possible solution Use unique ids to prevent collisions. I've already done that in my [laravel package](https://github.com/agatanga/flags/issues/2) If you are interested in this change I'll open PR with updated icons.

kerem

2026-03-03 14:38:46 +03:00

closed this issue
added the
bug
label

kerem commented

2026-03-03 14:38:47 +03:00

Author

Owner

@lipis commented on GitHub (Oct 19, 2022):

What kind of change is required.. I think we have unique ids everywhere.

@lipis commented on GitHub (Oct 19, 2022): What kind of change is required.. I think we have unique ids everywhere.

kerem commented

2026-03-03 14:38:47 +03:00

Author

Owner

@vovayatsyuk commented on GitHub (Oct 19, 2022):

Here is an example for ag.svg:

@@ -1,10 +1,10 @@
 <svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ag" viewBox="0 0 512 512">
   <defs>
-    <clipPath id="a">
+    <clipPath id="ag-a">
       <path fill="#25ff01" d="M109 47.6h464.8v464.9H109z"/>
     </clipPath>
   </defs>
-  <g fill-rule="evenodd" clip-path="url(#a)" transform="translate(-120 -52.4) scale(1.1014)">
+  <g fill-rule="evenodd" clip-path="url(#ag-a)" transform="translate(-120 -52.4) scale(1.1014)">
     <path fill="#fff" d="M0 47.6h693V512H0z"/>
     <path d="M1.5 48.2h690.9v196.2H1.5z"/>
     <path fill="#0061ff" d="M128.3 232.1h458.5v103.4H128.3z"/>

@vovayatsyuk commented on GitHub (Oct 19, 2022): Here is an example for ag.svg: ```diff @@ -1,10 +1,10 @@ <svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-ag" viewBox="0 0 512 512"> <defs> - <clipPath id="a"> + <clipPath id="ag-a"> <path fill="#25ff01" d="M109 47.6h464.8v464.9H109z"/> </clipPath> </defs> - <g fill-rule="evenodd" clip-path="url(#a)" transform="translate(-120 -52.4) scale(1.1014)"> + <g fill-rule="evenodd" clip-path="url(#ag-a)" transform="translate(-120 -52.4) scale(1.1014)"> <path fill="#fff" d="M0 47.6h693V512H0z"/> <path d="M1.5 48.2h690.9v196.2H1.5z"/> <path fill="#0061ff" d="M128.3 232.1h458.5v103.4H128.3z"/> ```

kerem commented

2026-03-03 14:38:47 +03:00

Author

Owner

@vovayatsyuk commented on GitHub (Oct 19, 2022):

Here is a script I used to update flags: https://github.com/agatanga/flags/issues/2#issuecomment-1282828743

@vovayatsyuk commented on GitHub (Oct 19, 2022): Here is a script I used to update flags: https://github.com/agatanga/flags/issues/2#issuecomment-1282828743

kerem commented

2026-03-03 14:38:48 +03:00

Author

Owner

@NotTsunami commented on GitHub (Dec 21, 2022):

What kind of change is required.. I think we have unique ids everywhere.

@lipis That was reverted in #1009, perhaps unintentionally?

@NotTsunami commented on GitHub (Dec 21, 2022): > What kind of change is required.. I think we have unique ids everywhere. @lipis That was reverted in #1009, perhaps unintentionally?

kerem commented

2026-03-03 14:38:48 +03:00

Author

Owner

@kt-jet commented on GitHub (Jun 19, 2023):

We are running into the same problem. Non-unique ids mess up the flags if you show more than one. A fix would be much appreciated.

@kt-jet commented on GitHub (Jun 19, 2023): We are running into the same problem. Non-unique ids mess up the flags if you show more than one. A fix would be much appreciated.

kerem referenced this issue

2026-03-03 14:40:55 +03:00

[PR #492] [MERGED] Update Canadian colors #820