Can common attributes for SVG symbols be applied to the main SVG element?

Discussion in 'HTML & Website Design' started by zoltankr, Sep 17, 2024.

  1. #1
    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.
     
    zoltankr, Sep 17, 2024 IP
  2. GreenHost.Cloud

    GreenHost.Cloud Active Member

    Messages:
    473
    Likes Received:
    34
    Best Answers:
    3
    Trophy Points:
    73
    #2
    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.
     
    GreenHost.Cloud, Sep 18, 2024 IP
  3. Hostragons

    Hostragons Active Member

    Messages:
    40
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    80
    #3
    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.
     
    Hostragons, Sep 18, 2024 IP