Using xml tags in svg

Discuss SVG code, accessible via the XML Editor.
Forum rules
Post Reply
vinni_pux
Posts: 3
Joined: Wed Aug 14, 2013 5:57 pm

Using xml tags in svg

Postby vinni_pux » Wed Aug 14, 2013 6:09 pm

Hello all. I have a next code.

[svg]<svg width="600px" height="400px" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<YYY>
<g class='xxx:signal-class' transform="translate(270, 300)">
<circle fill='#00bf00' stroke='#bfbfbf' stroke-width='1' cx="32.00" r="9.00" cy="8.00"></circle>
</g>
</YYY>
</svg>[/svg]

My task - display this SVG code in browser(Chrome, Firefox).

PS. I am sorry for my English.
Top
Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Using xml tags in svg

Postby Lazur » Sat Aug 17, 2013 9:16 am

Hi there.

Not sure of the viewbox part.

Are you looking for this, or something alike?:

Code: Select all

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="600"
   height="400"
   id="hlp67">
  <g>
  <path
     d="M 41,8 A 9,9 0 1 1 23,8 9,9 0 1 1 41,8 z"
     transform="translate(270,300)"
     style="fill:#00bf00;fill-opacity:1;fill-rule:nonzero;stroke:#bfbfbf;stroke-opacity:1"/>
  </g>
</svg>


SVG Image

Id-s are deleted in this one.

The simple

Code: Select all

<path
     transform="translate(270,300)"
    type="arc"
    cx="32"
    cy="8"
    rx="9"
    ry="9"
     style="fill:#00bf00;fill-opacity:1;fill-rule:nonzero;stroke:#bfbfbf;stroke-opacity:1" />
version somehow didn't work,
but "d" alone could define that path.
Top
vinni_pux
Posts: 3
Joined: Wed Aug 14, 2013 5:57 pm

Re: Using xml tags in svg

Postby vinni_pux » Tue Aug 20, 2013 6:32 pm

My task - view svg in browser. The main condition - tag <g> is the child of tag <YYY>.

Code: Select all

<svg width="600px" height="400px" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<YYY>
<g class='xxx:signal-class' transform="translate(270, 300)">
<circle fill='#00bf00' stroke='#bfbfbf' stroke-width='1' cx="32.00" r="9.00" cy="8.00"></circle>
</g>
</YYY>
</svg>


PS. I am sorry for my English.
Top
v1nce
Posts: 696
Joined: Wed Jan 13, 2010 4:36 am

Re: Using xml tags in svg

Postby v1nce » Thu Aug 22, 2013 3:58 am

Are there other conditions ?
This works (tested in Chromium) but maybe it won't fit your needs : it moves the node one level upwards

Code: Select all

<svg id="svg" onload="init(evt)" width="600px" height="400px" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

<script type="text/ecmascript"><![CDATA[
function init(evt) {
  svgDocument = evt.target.ownerDocument;
  node = svgDocument.getElementById("root");
  svg  = svgDocument.getElementById("svg");
  node.parentNode.removeChild(node);
  svg.appendChild(node);
}
]]></script>

 
<YYY>
<g id="root" class='xxx:signal-class' transform="translate(270, 300)">
<circle fill='#00bf00' stroke='#bfbfbf' stroke-width='1' cx="32.00" r="9.00" cy="8.00"></circle>
</g>
</YYY>
</svg>
Top
vinni_pux
Posts: 3
Joined: Wed Aug 14, 2013 5:57 pm

Re: Using xml tags in svg

Postby vinni_pux » Thu Aug 22, 2013 5:54 pm

v1nce wrote:Are there other conditions ?
This works (tested in Chromium) but maybe it won't fit your needs : it moves the node one level upwards

Code: Select all

<svg id="svg" onload="init(evt)" width="600px" height="400px" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

<script type="text/ecmascript"><![CDATA[
function init(evt) {
  svgDocument = evt.target.ownerDocument;
  node = svgDocument.getElementById("root");
  svg  = svgDocument.getElementById("svg");
  node.parentNode.removeChild(node);
  svg.appendChild(node);
}
]]></script>

 
<YYY>
<g id="root" class='xxx:signal-class' transform="translate(270, 300)">
<circle fill='#00bf00' stroke='#bfbfbf' stroke-width='1' cx="32.00" r="9.00" cy="8.00"></circle>
</g>
</YYY>
</svg>


Oh, thank you. But this code changed the structure of svg file.
Probably, my solution - it is Dynamic Type Definition(DTD) - http://www.w3.org/TR/SVG/extend.html
On my opinion, if element <view> will equal element <g>, it is complete this task for me.

Code: Select all

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY % SVG.view.extra.content  "| customNS:customElement" >
<!ATTLIST %SVG.view.qname;
  xmlns:customNS CDATA #FIXED "http://www.example.org/customNS"
  customNS:customAttr CDATA #IMPLIED>
<!ELEMENT customNS:customElement EMPTY>
<!ATTLIST customNS:customElement
  xmlns:customNS CDATA #FIXED "http://www.example.org/customNS"
  info CDATA #IMPLIED>
]>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="8cm" height="4cm">
  <desc>Extend the 'view' element via the internal DTD subset</desc>
  <!-- Presumably, some great graphics would go here. -->
  <view viewBox="100 110 20 30" customNS:customAttr="123">
    <customNS:customElement info="abc"/>
  </view>
</svg>
Top
Post Reply

Return to “SVG / XML Code”