In SVG, is <path /> identical to <path></path>? - svg
I've been doing some work with SVG, and have been both writing it from scratch and generating it with javascript (including d3js).
One thing I have just noticed is that when I create a new element in javascript, ie by using
var pathNode = document.createElementNS(svgns,"path");
var pathElement = svg.appendChild(pathNode);
The resulting HTML is <path></path>. I've checked lots of D3 demos and this is how D3 produces the HTML too.
In all the docs I've read about SVG, I've never seen any mention of writing an SVG element this way. Do browsers treat the two identically? In all the browsers I've tested, the SVG displays correctly, and the W3C validator validates both versions so it would appear to be the case, but can anyone just clarify this to give me peace of mind?
SVG is an XML language and in XML <x></x> is exactly the same as <x/>. Per the XML specification
Empty-element tags may be used for any element which has no content, whether or not it is declared using the keyword EMPTY
Related
TinyMCE and SVG
I'm using the latest/current TinyMCE editor (<script type="text/javascript" src='https://cdn.tinymce.com/4/tinymce.min.js'></script>) and it doesn't seem capable of displaying <svg>. I have some HTML saved in a database which contains some <svg>. When loaded in TinyMCE, it doesn't display. Is this a known issue (I've searched and haven't found much)? Any workarounds?
TinyMCE strips empty and invalid tags. You can solve it by
Adding ' ' to each empty element:
svg.find('*').each(function() {
if (!$(this).html()) {
$(this).text(' ');
}
});
here svg is your jQuery wrapped svg element.
Extending the valid elements according to the svg element reference*
extended_valid_elements: "svg[*],defs[*],pattern[*],desc[*],metadata[*],g[*],mask[*],path[*],line[*],marker[*],rect[*],circle[*],ellipse[*],polygon[*],polyline[*],linearGradient[*],radialGradient[*],stop[*],image[*],view[*],text[*],textPath[*],title[*],tspan[*],glyph[*],symbol[*],switch[*],use[*]"
*Note I added only the elements relevant for my case.
I tried Koen's first suggestion and it worked for existing SVG content (I added this in the setup callback). However it still filtered the SVG tags out when pasting HTML into the source code editor and then confirming the dialog. After digging a bit into TinyMCE's source code to see where those elements are actually removed (it's in the DomParser class) I found an undocumented editor setting for the Schema class that specifies tags that are allowed to be empty without being removed. The only annoying thing is that you can't use it to add to the existing list, you can only override it. So when setting it you have to list the tags it has in there by default as well. Use this in the settings that you provide to TinyMCE when initialising it: // First the list of tags that it normally knows about by default: non_empty_elements: "td,th,iframe,video,audio,object,script,pre,code,area,base,basefont,br,col,frame,hr,img,input,isindex,link,meta,param,embed,source,wbr,track" // Now we add tags related to SVGs that it doesn't normally know about: + "svg,defs,pattern,desc,metadata,g,mask,path,line,marker,rect,circle,ellipse,polygon,polyline,linearGradient,radialGradient,stop,image,view,text,textPath,title,tspan,glyph,symbol,switch,use", This way these SVG tags should never be filtered out because they are empty - as long as they are also valid in general, e.g. by setting the extended_valid_elements as Koen suggested above or by allowing all elements (not recommended as it leaves you vulnerable to XSS attacks): extended_valid_elements: "*[*]" Please note that this worked for my version 4.5.8 of TinyMCE. Since this setting is undocumented it might not work anymore in current or future versions. Also they might've adjusted the default list that I'm overriding here in later versions. Find nonEmptyElementsMap and shortEndedElementsMap in Schema.js in their source code to find the default list in your version (the two lists get combined) and note that in there the tags are separated by spaces but when you supply a list yourself the list is separated by commas (for whatever reason).
Seams to be TinyMCE that removes it because it is an empty tag: http://world.episerver.com/forum/developer-forum/-EPiServer-75-CMS/Thread-Container/2015/1/tinymce-and-svgs/ You might be able to use this inside the init: extended_valid_elements : "svg[*]", It works with other empty tags etc, but have never tried with SVG. From the forum post I linked to: ok,I did some debugging into TinyMCE and the problem seems to be that the svg element is detected as being empty and therefor removed. Unfortunatley there is no config way to change this behavior but there are some workarounds. Always have a name attibute for the svg element: <svg name="something" Always have a data-mce attribute for the svg element: <svg data-mce-something="something" Include some text content within the svg element: <svg> </svg> Using these techniques i could succesfully store inline svg in an xhtml property
I made it work by adding all valid SVG elements to the extended_valid_elements property of the settings object while initializing TinyMCE, no other action was needed For your convenience here's the full list of SVG elements I used a[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],animate[*],animateMotion[*],animateTransform[*],circle[*],clipPath[*],color-profile[*],cursor[*],defs[*],desc[*],ellipse[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDistantLight[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],fePointLight[*],feSpecularLighting[*],feSpotLight[*],feTile[*],feTurbulence[*],filter[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],foreignObject[*],g[*],glyph[*],glyphRef[*],hkern[*],image[*],line[*],linearGradient[*],marker[*],mask[*],metadata[*],missing-glyph[*],mpath[*],path[*],pattern[*],polygon[*],polyline[*],radialGradient[*],rect[*],script[*],set[*],stop[*],style[*],svg[*],switch[*],symbol[*],text[*],textPath[*],title[*],tref[*],tspan[*],use[*],view[*],vkern[*],a[*],animate[*],animateMotion[*],animateTransform[*],circle[*],clipPath[*],defs[*],desc[*],discard[*],ellipse[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDistantLight[*],feDropShadow[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],fePointLight[*],feSpecularLighting[*],feSpotLight[*],feTile[*],feTurbulence[*],filter[*],foreignObject[*],g[*],hatch[*],hatchpath[*],image[*],line[*],linearGradient[*],marker[*],mask[*],metadata[*],mpath[*],path[*],pattern[*],polygon[*],polyline[*],radialGradient[*],rect[*],script[*],set[*],stop[*],style[*],svg[*],switch[*],symbol[*],text[*],textPath[*],title[*],tspan[*],use[*],view[*],g[*],animate[*],animateColor[*],animateMotion[*],animateTransform[*],discard[*],mpath[*],set[*],circle[*],ellipse[*],line[*],polygon[*],polyline[*],rect[*],a[*],defs[*],g[*],marker[*],mask[*],missing-glyph[*],pattern[*],svg[*],switch[*],symbol[*],desc[*],metadata[*],title[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDropShadow[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],feSpecularLighting[*],feTile[*],feTurbulence[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],hkern[*],vkern[*],linearGradient[*],radialGradient[*],stop[*],circle[*],ellipse[*],image[*],line[*],path[*],polygon[*],polyline[*],rect[*],text[*],use[*],use[*],feDistantLight[*],fePointLight[*],feSpotLight[*],clipPath[*],defs[*],hatch[*],linearGradient[*],marker[*],mask[*],metadata[*],pattern[*],radialGradient[*],script[*],style[*],symbol[*],title[*],hatch[*],linearGradient[*],pattern[*],radialGradient[*],solidcolor[*],a[*],circle[*],ellipse[*],foreignObject[*],g[*],image[*],line[*],path[*],polygon[*],polyline[*],rect[*],svg[*],switch[*],symbol[*],text[*],textPath[*],tspan[*],use[*],g[*],circle[*],ellipse[*],line[*],path[*],polygon[*],polyline[*],rect[*],defs[*],g[*],svg[*],symbol[*],use[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],glyph[*],glyphRef[*],textPath[*],text[*],tref[*],tspan[*],altGlyph[*],textPath[*],tref[*],tspan[*],clipPath[*],cursor[*],filter[*],foreignObject[*],hatchpath[*],script[*],style[*],view[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],animateColor[*],cursor[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],glyph[*],glyphRef[*],hkern[*],missing-glyph[*],tref[*],vkern[*]
D3js page: how to replace topojson generated svg by stand alone svg file?
Given a D3js script, with interactive functionalities a lot like what I want, using a topojson to generate its SVG.
Given I, on my side, don't have topojson but a SVG file, on which I wish to reuse the same interactive functionalities.
How should I process so my D3js code load my SVG file rather than generate one from a topojson ?
I will of course provide a strictly coded SVG file, with suitable ids and syntaxe.
Idea: I guess I should replace the
d3.json("/mbostock/raw/4090846/us.json", function(error, us) {
// further SVG generator code here
});
which generate the SVG code by something to load and place my SVG file, but how to process ? what code to use ?
You can include the SVG file directly in your HTML, no need to load it in Javascript. For example:
<object id="mySVG" data="my.svg" type="image/svg+xml"></object>
The only thing to keep in mind with this is that you end up with two DOMs in your document (the main HTML one and the embedded SVG one) and CSS selectors don't cross DOM boundaries. That is, d3.select("#IDinSVG") probably won't work, but something like d3.select(d3.select("#mySVG").node().getDocumentElement()).select("#IDinSVG") should.
Do SVG docs support custom data- attributes?
In HTML5, elements can have arbitrary metadata stored in XML attributes whose names start with data- such as <p data-myid="123456">. Is this part of the SVG spec too? In practice this technique works fine for SVG docs in many places. But I'd like to know if it's part of the official SVG spec or not, because the format is young enough that there's still a lot of incompatibility between browsers, especially in mobile. So before committing to code I'd like know if I can expect future browsers to converge on supporting this. I found this message from the working group mailing list saying they "expect [they] will" support it. Did this become official?
While other answers are technically correct, they omit the fact that SVG provides an alternative mechanism for data-*. SVG allows any attribute and tag to be included, as long as it doesn't conflict with existing ones (in other words: you should use namespaces). To use this (equivalent) mechanism: use mydata:id instead of data-myid, like this: <p mydata:id="123456"> make sure you define the namespace in SVG opening tag, like this: <svg xmlns:mydata="http://www.myexample.com/whatever"> EDIT: SVG2, currently W3C Candidate Recommendation (04 October 2018), will support data- directly (without namespaces, the same as HTML). It will take some time before the support is widespread though. Thanks #cvrebert for pointing this out.
The data-* attribute is part of HTML5. It’s not a generic XML attribute. The current SVG W3C Recommendation is SVG 1.1 (from 2011-08). It doesn’t allow this attribute, as you can check in the attributes list. The same is the case for the SVG 2 Working Draft (from 2012-08). Update (2015): It seems that it’s intended to support data-* attributes in SVG 2 (currently still a Working Draft).
data-* attributes on SVG elements are officially supported in the current draft of SVG2. See: w3c/svgwg commit 1cb4ee9: Added SVGElement.dataset and allowed data-* attributes on all SVG elements. ACTION-3694: Add "data-*" attributes notes to spec. (Created on: January 15, 2015) RESOLUTION: We will reserve "data-*" attributes to be used in SVG content. The API for handling them is on Element. (from SVG WG Telecon on 15-Jan-2015) https://lists.w3.org/Archives/Public/www-svg/2014Dec/0022.html
there is a more general mechanism. svg supports desc elements which may contain arbitrary xml from other namespaces. link instances of this elements or child nodes from you own namespace by dependent ids or refid attributes. this is the relevant part of the spec (5.4).
SVG with external images doesn't load them when embedded with <img> tag in browsers
I made the following observation: If I create an svg image that references an external raster image via xlink:href and try to load the svg in browsers, the external images are only shown if I use the <object> tag, but not when using the <img> tag. Rendering with the <object> tag is quite slow and not as clean as using the img tag for images so I was wondering if there's a way to make it work through the <img> tag. At first I thought it doesn't work because of a same origin policy, but even if the referenced image is in the same directory and I reference it through its name only, it wont load. Any ideas?
Are you using IE? IE doesnt recognize SVG anyway. Microsoft is always ten years behind, yet they are more popular and far more costly, for some reason. Name brand propaganda? SVG loads in Firefox. Both as an XML document referenced directly in the URL, and also if you embed it into an XHTML (fully XML compliant) document with proper namespacing, the SVG should render properly. The great thing about this option is that DHTML can manipulate your SVG. Everything I said in this paragraph also applies to MathML, if youre curious. Aside from that, SVG doesn't load from an image tag. I do believe Firefox is working on this upgrade, though. Im not entirely sure. Using the object or embed tag is reasonable, I suppose... but one of my earlier fixes was to use an iframe. Embed an iframe in your html that references the complete SVG file. Using CSS you can make the iframe look flush with the rest of your document, appearing and acting like an image. Encased in a div or span tag, you can have onhover and onclick event handlers. Using the image tag, your src can be a PHP file on server side. If properly coded and with the appropriate cgi apps, you can rasterize your SVG on server-side, and have that PNG data sent back to your image via the PHP src.
There's no particular reason <object> should be any slower to load than <img> apart from possibly the interaction aspect (img's are static while object's are fully interactive documents). The images inside the svg should load in both scenarios, so it sounds like a bug in the browser. Could you post a link to your example?
I think you are at least 10 months behind...IE9 supports SVG, and pre-release versions (including a beta) have been out for quite a while. Check out www.ietestdrive.com to grab the platform preview - it's pretty good. In my opinion, parts of their SVG support are much better than Firefox currently (but they don't support SMIL yet).
how to get the css keys and values for any html tag
I would like to dump all css key/value pairs for an html tag.
In particular, I would like to learn the css properties for <audio> tag, so I can try to customize the look.
document.getElementById('myaudio').style returns a CSSStyleDeclaration object but length returns 0 and I cannot figure out to iterate over the key/value pairs.
Thank you
Try Firebug for firefox. It allows you to view the CSS and properties of any element on a webpage and allows in-page editing so you can customise it on the fly until you are happy without having to create hard and fast changes
You can't iterate over the keys in the style object. It's simply impossible. The best answer is what Chris said. Use Firebug in Firefox, or similar tools in the other browsers, which can do the work for you and tell you exactly what CSS properties apply to the element. (Make sure that you tell the tool to show you "user agent styles", not just styles you've added, so you can see what styles the browser applies automatically.)