CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
user31782
user31782

Reputation: 7587

Is it ok to have style tag and xml in svg embedded in html page?

I have generated some svgs with Adobe Illustrator and have embedded them inline in my html page. As far as I know all style tags must be in head but these svgs have their own style tags. Following is the example of one svg: 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 526.6 28.3" style="enable-background:new 0 0 526.6 28.3;" xml:space="preserve">
    <style type="text/css">
        .st0 {
        fill: none;
        }

        .st1 {
        enable-background: new;
        }

        .st2 {
        fill: #009444;
        }
    </style>
    <rect y="2.3" class="st0" width="526.6" height="26" />
</svg>

The svg renders well in Firefox and Chrome. One svg appeared smaller than in other browsers in IE11 and Edge it appeared perfect. I haven't checked in Safari as I don't have mac. My question is:

P.S: In a work of mine I saw problems with inline svg in EDGE browser when appended with jquery appendTo. The svgs, set to display inline-block overlapped each other. (The bottom case in https://anupamkhosla.github.io/marqueedirection/)

Upvotes: 1

Views: 1783

Answers (2)

phihag
phihag

Reputation: 288260

This is not an HTML document, but an SVG document.

In SVG, there is no <head> element and <style> is commonly placed directly in the root elements or in a <defs> subelement.

As documented in the HTML standard, you can embed whole SVG documents in HTML, including <style>. Therefore, it is ok to place style into SVG documents within HTML ones, provided they are actually SVG, i.e. their namespace is http://www.w3.org/2000/svg.

In HTML, <style> should be put under <head> (or <noscript> in <head>), per the HTML standard.

Upvotes: 0

John
John

Reputation: 1489

You can refer MDN for these kinds of standards. As it is given in their SVG style page, you can use and it is valid to have <style> tag inside SVG.

Upvotes: 1

Related Questions