Summary edit

DescriptionTest only.svg	Test image applying style sheets (checks libsvg rendering). All items should look the same. View source for what works and what doesn't.
Date	August 2007
Source	Own work
Author	H2g2bob
SVG development InfoField	The SVG code is valid.   This vector image was created with Inkscape.    This file uses embedded text that can be easily translated using a text editor. This SVG picture shows a librsvg bug.Bug replaced description: CSS child selectors are not supported:[1] bugzilla:41423   A raster version of this image is available. It should be used in place of this vector image because of its superior quality. File:Test only.svg → File:Test only RenderedByInkscape.png In general, it is better to use a good SVG version. العربية ∙ Boarisch ∙ বাংলা ∙ čeština ∙ Deutsch ∙ English ∙ Esperanto ∙ español ∙ فارسی ∙ suomi ∙ français ∙ galego ∙ עברית ∙ hrvatski ∙ Bahasa Indonesia ∙ italiano ∙ 日本語 ∙ 한국어 ∙ македонски ∙ മലയാളം ∙ Plattdüütsch ∙ Nederlands ∙ polski ∙ português ∙ русский ∙ sicilianu ∙ slovenščina ∙ svenska ∙ Türkçe ∙ українська ∙ Tiếng Việt ∙ 中文（简体）‎ ∙ 中文（繁體）‎ ∙ +/−

Sorry, this SVG file is solely a source for re-utilization, editing or printing purposes. Please do not use this graphic within Wikipedia articles! MediaWiki isn't able to render this image correctly. Some details may be missing or look wrong. When you include the image in a Wikipedia or any other Wikimedia project site's page, you may want to use the other file, until the support increases. File:Test only.svg File:Test only withoutCSS HowItShouldLookLike.svg Deutsch ∙ English ∙ español ∙ italiano ∙ 日本語 ∙ 한국어 ∙ македонски ∙ português do Brasil ∙ русский ∙ sicilianu ∙ slovenščina ∙ 简体中文 ∙ 繁體中文 ∙ +/−

 

This SVG picture shows a librsvg bug.Bug replaced description: CSS child selectors are not supported:[2] bugzilla:41423

Licensing edit

I, the copyright holder of this work, release this work into the public domain. This applies worldwide. In some countries this may not be legally possible; if so: I grant anyone the right to use this work for any purpose, without any conditions, unless such conditions are required by law.

Tests edit

1 - Apply style directly edit

This method always works, and is the type automatically generated, eg: by Inkscape. Path is the circle, rect is the square.

<g>
   <path style="stroke-width: 2; fill: red;">
   <rect style="stroke-width: 2; fill: blue;">

2 - Applying style to path and rect using a stylesheet edit

Uses the svg:style element to define style rules, as in a CSS stylesheet. Applies a "shape_direct" class to both shapes, and applied "square" class to the square to make it blue. "square" class uses !important to override shape_direct's red color.

<style>
   .shape_direct {
      stroke-width: 2;
      fill: red; }
   .square {
      fill: blue !important; }
<g>
   <path class="shape_direct">
   <rect class="shape_direct square">

3 - Style rules on inherited style classes edit

Same as 2, but replaces "shape_direct" class with the two classes "shape_under_group" and "group" as descendant-selectors.

<style>
   .group .shape_under_group {
      stroke-width: 2;
      fill: red; }
   .square {
      fill: blue !important; }
<g class="group">
   <path class="shape_under_group">
   <rect class="shape_under_group square">

4 - Style rules on inherited style classes edit

Same as 3, but replaces "square" class with a rule looking for an item with the id "square_id" under any object of "group" class.

<style>
   .group .shape_under_group {
      stroke-width: 2;
      fill: red; }
   .group #square_id {
      fill: blue; }
<g class="group">
   <path class="shape_under_group">
   <rect class="shape_under_group" id="square_id">

5 - Style rules applied to higher-level elements edit

Tests inheritance of style rules. In firefox and inkscape, applying a style to an element then applies that style to all child elements; others may apply default style sheets.

<style>
   .shape_direct {
      stroke-width: 2;
      fill: red; }
   .square {
      fill: blue !important; }
<g class="group">
   <path>
   <rect class="square">

6 - Force inherit edit

Same as 5, but explicitly requests inheritance.

<style>
   .shape_direct {
      stroke-width: 2;
      fill: red; }
   .square {
      fill: blue !important; }
   .force_inherit {
      fill:             inherit;
      stroke:           inherit;
      stroke-width:     inherit;
      opacity:          inherit;
      fill-opacity:     inherit; }
<g class="group">
   <path class="force_inherit">
   <rect class="force_inherit square">