File:T304209.svg

Summary

Description Test image applying style sheets (checks libsvg rendering). All items should look the same. View source for what works and what doesn't.
Date
Source Own work based on: Test only.svg
Author H2g2bob
SVG development
InfoField
 The SVG code is valid.
 This vector image was created with Inkscape.
Category:Valid SVG created with Inkscape:Examples#T304209.svg
  Category:Translation possible - SVGThis file uses embedded text that can be easily translated using a text editor.
Category:Pictures showing a librsvg bug (SVG replaced)#T304209.svg
A raster version of this image is available. It should be used in place of this vector image because of its superior quality.

In general, it is better to use a good SVG version.
Bitmap image
Category:Bitmap version available
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.

Deutsch ∙ English ∙ español ∙ italiano ∙ 日本語 ∙ 한국어 ∙ македонски ∙ português do Brasil ∙ русский ∙ sicilianu ∙ slovenščina ∙ 简体中文 ∙ 繁體中文 ∙ +/−
{{{svgImageLabel}}}

Category:Librsvg bug replaced by vector graphic#T304209.svg

Licensing

Public domain 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.
Category:Self-published work#T304209.svgCategory:PD-self#T304209.svg

Tests

Engine123456Notes
MediaWiki (libsvg 2.40.16)YesYesNoNoNoNoCannot render descendant selectors, and using property "inherit" with other style classes fails.
Inkscape 0.45, 0.46YesYesNoYesYesYesIn 3, misses rule for square class
KSVG 0.1YesNoNoNoNoNoCan't do style
Firefox (Iceweasel 2.0.0.6)YesYesYesYesYesYes
Opera 9.64YesYesYesYesYesYes
Google Chrome 64YesYesYesYesYesYes

1 - Apply style directly

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

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

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

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

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

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">
Category:Cascading Style Sheets Category:Examples representing SVG Category:Image detail for discussion Category:Pictures demonstrating a librsvg bug Category:Pictures showing a rendersvg bug - test suite
Category:Bitmap version available Category:Cascading Style Sheets Category:Commons:Unspecified topic Category:Examples representing SVG Category:Image detail for discussion Category:Librsvg bug replaced by vector graphic Category:PD-self Category:Pictures demonstrating a librsvg bug Category:Pictures showing a librsvg bug (SVG replaced) Category:Pictures showing a rendersvg bug - test suite Category:Self-published work Category:Translation possible - SVG Category:Valid SVG created with Inkscape:Examples