where to put css code : svg cdata style (inline) and html style (inline )

lionelbg

unread,

Mar 23, 2014, 4:16:26 PM3/23/14

to blueg...@googlegroups.com

Hi

A---
IF i use SVG and define css code inside svg using
<svg ><style type="text/css" > <![CDATA[ circle { stroke: #006600; fill: #00cc00; } ]]> </style></svg>


then Bluegriffon remove          <![CDATA[      ]]>

so i have <svg><style type="text/css" >        circle {           stroke: #006600;           fill:   #00cc00;        }    </style></svg>

I don't read the specification about style  locate in html( SVG ( style))  . 
Does omit CDATA is a way supported by specification and implemented by browser ? 

B--- 
I use definition css code in html style tag element . 
<html> <style> >       circle {           stroke: #006600;           fill:   #00cc00;        }    </style></html>
it work but does this is supported by all browser ? 

regard's

Joeg

unread,

Mar 24, 2014, 7:40:19 AM3/24/14

to blueg...@googlegroups.com

CDATA is used to hide text from XML parsers. You don't say what DOCTYPE you are using but unless it is XHTML, CDATA is unnecessary. Support for SVG is poor in browsers generally and I would avoid it myself on compatibility grounds considering the number of people still using old versions of IE.

ChrisSoftEng

unread,

Mar 24, 2014, 2:12:58 PM3/24/14

to blueg...@googlegroups.com

This is SVG for circle with colors green stroke and fill (no use of CSS):

<?xml version="1.0" standalone="no"?>

<svg contentScriptType="text/ecmascript" width="600.0px" xmlns:xlink="http://www.w3.org/1999/xlink"
    baseProfile="full" zoomAndPan="magnify" contentStyleType="text/css" height="600.0px"
    preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.0">

    <ellipse rx="96.0" fill="#00cc00" ry="96.0" cx="312.0" cy="177.0" stroke="#006600"/>

</svg>

This SVG copied into text file renamed, say, circle.svg - file dragged onto (any) browser will display the circle.
Author Joeg says SVG maybe unworkable but 'old versions of IE' count for nothing. Inline SVG is the way to go for (mobile) apps with (interactive) graphics - Maybe see webapps.me.uk/bg.html that has page on SVG with BlueGriffon.
If necessary to use CSS, then maybe see 'How to Style SVG Using CSS' at sitepoint.com/svg-styling-with-css/

Reply all

Reply to author

Forward