Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Best practice to declare namespace for svg in HTML

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #197768
    Shikkediel
    Participant

    Hi all, been reading up on this but am utterly confused about it. Since I’m using several embedded svgs in my document, I thought to look for the most effective way to declare the namespace rather than specifying it for each separate element like this :

    <svg xmlns="http://www.w3.org/2000/svg">
    
    // some yummie svg stuff
    
    </svg>
    

    First thing I tried was to declaring it inside the &lt;html&gt; tag :

    <html xmlns="http://www.w3.org/1999/xhtml" 
          xmlns:svg="http://www.w3.org/2000/svg">
    

    The moz doc states you can do this… but it doesn’t validate somehow.
    Next up – using @namespace. And my question – is this a correct
    approach? If I define the namespace with CSS for the svgs, can I then leave them out of each &lt;svg&gt; tag?

    @namespace svg url(http://www.w3.org/2000/svg);
    

    Thanks in advance for any advice.

    #197769
    Shikkediel
    Participant

    Editing one’s post when there’s a few code blocks in it is quite a drag these days, if I may so so. Someone please fix this! ;-)
    But that’s merely a cry of frustration…

    #197770
    Paulie_D
    Member

    Editing one’s post when there’s a few code blocks in it is quite a drag these days.

    I seem to recall that there used to be a “preview” option..but perhaps that’s not possible under the current software.


    @ChrisCoyier

    #197771
    Shikkediel
    Participant

    I’ll use a workaround in the meantime anyway – to copy and paste the text to an editor before I post it (when there’s a few code blocks). Just so the ticks don’t need to be all redone if I missed one character. Not too sure what’s happening by the way – sometimes the prefixes seem to parse fine but often they get posted as plain text.

    Thanks in any case. It’s a side note of course…

    #197772
    Paulie_D
    Member

    I looked at the SVG spec –

    http://www.w3.org/TR/SVG11/struct.html#NewDocument

    ..which seems pretty comprehensive.

    As to what the best method is…I guess whatever works.

    #197777
    Shikkediel
    Participant

    Yeah, it’s a whole field of study on it’s own. Besides that, it’s not very compatible with jQuery either. :-S
    Mighty interesting though (for general use, not so much the read-through).

    I’ll mess around with it a bit, see what works or not. I even read HTML5 should automatically know what namespace to use for svg. But I think it can’t hurt to declare it with @namespace anyway – a subject that has surprisingly few Google results by the way. I’m also interested in how it would be possible to declare the xlink namespace by default. This turns up basically nothing when I run a search on it.

    Using several svg elements, it would clean up the HTML nicely when the namespace ‘links’ can be taken out of the &lt;svg&gt; tags.

    So any expertise that would be shared is very welcome. :-)

    #197780
    Paulie_D
    Member

    Besides that, it’s not very compatible with jQuery eithe

    Offhand, I would say it’s the other way round at the moment.

    Jquery hasn’t caught up with SVG…partly because the spec doesn’t allow adding classes etc to sub-elements / fragments.

    That said, there are some exciting SVG-JS libraries out there such as Snap, Raphael and GSAP.

    #197785
    Shikkediel
    Participant

    You are correct of course, jQuery is the incompatible part. But you can fake manipulating CSS by adding (or removing) classes as attributes. So it sorta works after all. Vanilla JS can fill in some other bits as well.

    B-)

    #197827
    Shikkediel
    Participant

    Well, seems to work fine without declaring any namespaces whatsoever.
    So why not stick with that…

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘Other’ is closed to new topics and replies.