Also, you will need to include the "embed tag" like you do with a flash file for it to work on all systems I believe. So one suggestion I have is to put your SVG inline code in their own separate html and inject them at runtime into your object and embed tags with PHP or the like. IF you really want to control them with the parent css.
The easiest way seems to be to use the style tag inside the SVG. I am not sure how to access that when creating your SVG. Hadn't gone that far. GL! Best, Karl DeSaulniers Design Drumm http://designdrumm.com > On Jul 14, 2016, at 12:13 AM, Karl DeSaulniers <k...@designdrumm.com> wrote: > > Crest, > Your main css would only have an effect on the content of the SVG if the SVG > file is included inline in the HTML. > If you want to keep your SVG in files, the CSS needs to be defined inside of > the SVG file. > You can do it with a style tag that is inside the SVG. > > > Otherwise you have to put the code for the svg inside the object tag if you > want control of styling it via the parent css. > > IE: > > <object id="word.pavement" width="400" height="300" type="image/svg+xml"> > > <svg xmlns="http://www.w3.org/2000/svg"; id="Layer_1" data-name="Layer 1" > viewBox="0 0 600.65 19.96"> > <defs> > > <style> > /*If the SVG is NOT inline like you have in your example, the styles must go > here*/ > <style/> > > </defs> > <path class="aa" > d="M8.6,2.9a29.15,29.15,0,0,1,4.83-.38c2.49,0,4.31.58,5.47,1.62A5.34,5.34,0,0,1,20.6,8.22a5.74,5.74,0,0,1-1.5,4.17,8.13,8.13,0,0,1-6,2.14,8.64,8.64,0,0,1-2-.17v7.81H8.6Zm2.52,9.4a8.45,8.45,0,0,0,2.08.2c3,0,4.89-1.5,4.89-4.14s-1.85-3.85-4.6-3.85a10.56,10.56,0,0,0-2.37.2Z" > transform="translate(-8.6 -2.52)"/> > <path class="ab" > d="M33,18.81a23.51,23.51,0,0,0,.2,3.36H30.9l-.2-1.76h-.09a5.22,5.22,0,0,1-4.28,2.08,4,4,0,0,1-4.28-4c0-3.38,3-5.24,8.42-5.21V13a2.87,2.87,0,0,0-3.18-3.21,6.75,6.75,0,0,0-3.67,1L23,9.09a9.07,9.07,0,0,1,4.63-1.22c4.28,0,5.32,2.92,5.32,5.7ZM30.53,15c-2.78-.06-5.93.43-5.93,3.15A2.23,2.23,0,0,0,27,20.6a3.53,3.53,0,0,0,3.44-2.34,2.87,2.87,0,0,0,.12-.81Z" > transform="translate(-8.6 -2.52)"/> > <path class="ac" > d="M37.84,8.16,40.59,16c.46,1.3.84,2.46,1.13,3.62h.09c.32-1.16.72-2.31,1.19-3.62l2.72-7.84h2.66l-5.5,14H40.45l-5.32-14Z" > transform="translate(-8.6 -2.52)"/> > <path class="ad" > d="M51.9,15.63c.06,3.44,2.23,4.86,4.8,4.86a9.1,9.1,0,0,0,3.88-.72L61,21.59a11.41,11.41,0,0,1-4.69.9c-4.31,0-6.89-2.86-6.89-7.09S52,7.88,56,7.88c4.6,0,5.79,4,5.79,6.57a6.24,6.24,0,0,1-.09,1.19Zm7.46-1.82c0-1.59-.67-4.11-3.53-4.11-2.6,0-3.7,2.34-3.91,4.11Z" > transform="translate(-8.6 -2.52)"/> > <path class="ae" > d="M65,12c0-1.48-.06-2.63-.12-3.79h2.23l.12,2.29h.09a4.84,4.84,0,0,1,4.43-2.58,4.13,4.13,0,0,1,3.93,2.81h.06A5.53,5.53,0,0,1,77.3,8.86a4.7,4.7,0,0,1,3.07-1C82.25,7.88,85,9.09,85,14v8.22H82.51v-7.9c0-2.72-1-4.31-3-4.31a3.35,3.35,0,0,0-3,2.29,4.35,4.35,0,0,0-.2,1.27v8.65H73.74V13.78c0-2.23-1-3.82-2.92-3.82a3.51,3.51,0,0,0-3.15,2.55,3.41,3.41,0,0,0-.2,1.24v8.42H65Z" > transform="translate(-8.6 -2.52)"/> > <path class="af" > d="M90.52,15.63c.06,3.44,2.23,4.86,4.8,4.86a9.1,9.1,0,0,0,3.88-.72l.46,1.82a11.41,11.41,0,0,1-4.69.9c-4.31,0-6.89-2.86-6.89-7.09s2.49-7.52,6.57-7.52c4.6,0,5.79,4,5.79,6.57a6.24,6.24,0,0,1-.09,1.19ZM98,13.81c0-1.59-.67-4.11-3.53-4.11-2.6,0-3.7,2.34-3.91,4.11Z" > transform="translate(-8.6 -2.52)"/> > <path class="ag" > d="M103.6,12c0-1.48,0-2.63-.12-3.79h2.26l.14,2.31h.06a5.19,5.19,0,0,1,4.63-2.6c1.94,0,4.95,1.16,4.95,6v8.33H113V14.1c0-2.26-.84-4.14-3.24-4.14a3.73,3.73,0,0,0-3.59,3.79v8.42H103.6Z" > transform="translate(-8.6 -2.52)"/> > <path class="ah" > d="M122.6,4.81V8.16h3.65V10.1H122.6v7.55c0,1.74.49,2.72,1.91,2.72A4.76,4.76,0,0,0,126,20.2l.12,1.94a7,7,0,0,1-2.26.35,3.63,3.63,0,0,1-2.75-1.07,5.47,5.47,0,0,1-1-3.67V10.1h-2.17V8.16h2.17V5.56Z" > transform="translate(-8.6 -2.52)"/> > </svg> > > </object> > > HTH, > Best, > > Karl DeSaulniers > Design Drumm > http://designdrumm.com > > > > >> On Jul 13, 2016, at 10:01 PM, Crest Christopher <crestchristop...@gmail.com> >> wrote: >> >> Here is an example pen <http://codepen.io/Sheep/pen/QEaLrV>; the SVG is >> being loaded externally, absolute path in this case. There are classes for >> each path within the SVG, I want to stylize the classes individually within >> the SVG, not just fill the classes with a path. >> >> Many of you have posted some good links, even if I've read them, none appear >> from my understanding to stylize classes from outside the SVG; I hopefully >> want to keep SVG separate from CSS, not intermix the two together within the >> SVG file. >> >>> Tom Livingston <mailto:tom...@gmail.com> >>> Wednesday, July 13, 2016 4:55 PM >>> Updated again. Sorry. My mistake. Just the class is working. >>> (I had left the style embedded inside the svg, so using "circle.st0" was >>> just more specific.) >>> >>> Tom Livingston <mailto:tom...@gmail.com> >>> Wednesday, July 13, 2016 4:50 PM >>> Updated to style the circles as well. Have to specify "circle.st0" for this >>> to work in chrome. Just the class didn't seem to work. >>> >>> >>> >>> Tom Livingston <mailto:tom...@gmail.com> >>> Wednesday, July 13, 2016 4:34 PM >>> It's pretty easy. Blue is done with css in the head. >>> >>> http://tomliv.com/svg/ >>> >>> >>> Tom Livingston <mailto:tom...@gmail.com> >>> Wednesday, July 13, 2016 4:18 PM >>> >>> As opposed to adding an svg using <img src=""> >>> >>> >>> >>> Tom Livingston <mailto:tom...@gmail.com> >>> Wednesday, July 13, 2016 4:17 PM >>> On Wed, Jul 13, 2016 at 3:10 PM, Crest Christopher < >>> >>> He's loading an svg by putting the svg code in the html and providing a >>> method of falling back to a png. He is styling the svg with css. >>> >>> >>> >> >> ______________________________________________________________________ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
