Hello, I have definitions for two icons, but both symbols use the same XML namespace (xmlns), as shown below. <svg style="display: none;"> <defs> <symbol id="icon-calendar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.33" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" /> <circle cx="18" cy="18" r="4" /> <path d="M15 3v4" /> <path d="M7 3v4" /> <path d="M3 11h16" /> <path d="M18 16.496v1.504l1 1" /> </symbol> <symbol id="icon-tag" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" /> <path d="M11 3L20 12a1.5 1.5 0 0 1 0 2L14 20a1.5 1.5 0 0 1 -2 0L3 11v-4a4 4 0 0 1 4 -4h4" /> <circle cx="9" cy="9" r="2" /> </symbol> </defs> </svg> Code (markup): Can I get rid of both "xlmns" and just use one on the main svg element instead, like so? <svg style="display: none;" xmlns="http://www.w3.org/2000/svg"> <defs> <symbol id="icon-calendar" viewBox="0 0 24 24" stroke-width="1.33" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" /> <circle cx="18" cy="18" r="4" /> <path d="M15 3v4" /> <path d="M7 3v4" /> <path d="M3 11h16" /> <path d="M18 16.496v1.504l1 1" /> </symbol> <symbol id="icon-tag" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" /> <path d="M11 3L20 12a1.5 1.5 0 0 1 0 2L14 20a1.5 1.5 0 0 1 -2 0L3 11v-4a4 4 0 0 1 4 -4h4" /> <circle cx="9" cy="9" r="2" /> </symbol> </defs> </svg> Code (markup): I would appreciate any suggestions.
Yes, you can remove the xmlns attribute from each <symbol> element and keep it only on the main <svg> element. The XML namespace declaration is only needed once at the root level for the SVG. This is completely valid and will not affect your icons. Here’s how your updated SVG code would look: <svg style="display: none;" xmlns="http://www.w3.org/2000/svg"> <defs> <symbol id="icon-calendar" viewBox="0 0 24 24" stroke-width="1.33" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z"/> <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4" /> <circle cx="18" cy="18" r="4" /> <path d="M15 3v4" /> <path d="M7 3v4" /> <path d="M3 11h16" /> <path d="M18 16.496v1.504l1 1" /> </symbol> <symbol id="icon-tag" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" /> <path d="M11 3L20 12a1.5 1.5 0 0 1 0 2L14 20a1.5 1.5 0 0 1 -2 0L3 11v-4a4 4 0 0 1 4 -4h4" /> <circle cx="9" cy="9" r="2" /> </symbol> </defs> </svg> Code (markup): By keeping the xmlns declaration only on the <svg> element, you ensure that all contained SVG elements inherit the namespace, making your code cleaner and easier to read. Just note that while the namespace is not required on the <symbol> elements, some SVG processing tools might expect it. However, in most standard browsers and scenarios, this adjustment will work just fine.
Yes, you can absolutely remove the xmlns attribute from the individual <symbol> elements and just use it once on the parent <svg> element. The xmlns declaration on the root <svg> applies to all of its children, including the <symbol> elements. This helps clean up the markup without losing functionality.