SVG examples

From Wikimedia Commons, the free media repository
(Redirected from SVG example - rectangle 1)
Jump to navigation Jump to search

Examples of SVG (Scalable Vector Graphics)

Basic shape examples

This simple svg examples show the code below. Changing the code will not affect the image, to do so use other tools such as rapidtables.com or polycursor.com archive copy at the Wayback Machine or codepen.io (use html for svg) archive copy at the Wayback Machine.

Lime-green rectangle

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="120" height="120">
  <rect x="14" y="23" width="200" height="50" fill="lime"
      stroke="black" />
</svg>

See also Transparent rectangle.

Blue rounded rectangle

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
      width="526" height="233">
  <rect x="13" y="14" width="500" height="200" rx="50" ry="100"
      fill="none" stroke="blue" stroke-width="10" />
</svg>

Red and blue squares

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
 width="467" height="462">
  <rect x="80" y="60" width="250" height="250" rx="20"
      style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
  
  <rect x="140" y="120" width="250" height="250" rx="40"
      style="fill:#0000ff; stroke:#000000; stroke-width:2px;
      fill-opacity:0.7;" />
</svg>

Can as well be written 

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="467" height="462" stroke="#000" stroke-width="2">
 <rect x="80" y="60" width="250" height="250" rx="20" fill="#F00"/>
 <rect x="140" y="120" width="250" height="250" rx="40" fill="#00F" fill-opacity=".7"/>
</svg>

Transparent rectangle

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="100%" height="100%" viewBox="0 0 1288.000000 728.000000"
 preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,728.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 3640 l0 -3640 6440 0 6440 0 0 3640 0 3640 -6440 0 -6440 0 0 -3640z
 m12800 0 l0 -3560 -6360 0 -6360 0 0 3560 0 3560 6360 0 6360 0 0 -3560z"/>
</g>
</svg>

Can as well be written with less effort 

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="289">
<path fill="none" stroke="#000" stroke-width="8" d="m0,0h512v289H0z"/>
</svg>

or, with rect instead of path 

...
<rect fill="none" stroke="#000" stroke-width="8" width="512" height="289"/>
...

Red, blue and green squares

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
     width="467" height="462">
  <rect x="80" y="60" width="250" height="250" rx="20"
      style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
  
  <rect x="140" y="120" width="250" height="250" rx="40"
      style="fill:#0000ff; stroke:#000000; stroke-width:2px;
      fill-opacity:0.7;" />

  <rect x="140" y="120" width="250" height="250" rx="40"
      style="fill:#00ff00; stroke:#0000cc; stroke-width:5px;
      fill-opacity:1.0;" />
</svg>

Red circle

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="400">
  <circle cx="100" cy="100" r="50" stroke="black"
    stroke-width="5" fill="red" />
</svg>

Ellipse

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="520" height="350">
  <ellipse
    cx="258" cy="169" rx="250" ry="80"
    transform="matrix(0.866025,-0.5,0.5,0.866025,-46,152)"
    style="fill:none;stroke:black;stroke-width:3" />
</svg>

Filled Oval

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" 
     width="100" height="50">
  <ellipse
    cx="50" cy="25" rx="50" ry="25" 
    fill="blue" stroke="none" />
</svg>

Multiple grayscales


Exact the same image differently coded (needing 744 / 450 / 295 bytes) 

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg>
 <svg xmlns="http://www.w3.org/2000/svg"
      width="1000" height="600"
      viewBox="0 0 5 5">
    <rect id="black"
         fill="#000"
         width="5"
         height="3"/>
    <rect id="gray_i"
         fill="#444"
         width="5"
         height="2" y="1"/>
    <rect id="gray_ii"
         fill="#888"
         width="5"
         height="1" y="2"/>
    <rect id="gray_iii"
         fill="#ccc"
         width="5"
         height="1" y="3"/>
    <rect id="white"
         fill="#fff"
         width="15"
         height="1" y="4"/>
</svg>

Pentagram

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE svg>
 <svg xmlns="http://www.w3.org/2000/svg"
      width="304" height="290">
   <path d="M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z" 
      style="fill:#FB2;stroke:#BBB;stroke-width:15;stroke-linejoin:round"/>
</svg>

See also: Das Pentagramm als manuelle SVG-Grafik (de) Eine Anleitung

Text

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="105" height="100"><text x="1" y="50"><tspan>Just an example</tspan></text></svg>

Same display, reduced (126 bytes): 

<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" width="105" height="99"><text y="50">Just an example</text></svg>

more advanced example:

Multilingual files

Using the switch element:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="140" style="font-family:sans-serif;font-size:30px">
	<text x="30" y="50">systemLanguage:</text>
	<switch allowReorder="yes" transform="translate(30,110)" fill="red">
		<text systemLanguage="de">de</text>
		<text systemLanguage="en">en</text>
		<text systemLanguage="es">es</text>
		<text systemLanguage="fr">fr</text>
		<text systemLanguage="it">it</text>
		<text systemLanguage="cs">cs</text>
		<text systemLanguage="tl">tl</text>
		<text systemLanguage="to">to</text>
		<text systemLanguage="zh">zh</text>
		<text systemLanguage="zh-hans">zh-hans</text>
		<text systemLanguage="zh-hant">zh-hant</text>
		<text systemLanguage="zh-cn">zh-cn</text>
		<text systemLanguage="zh-tw">zh-tw</text>
		<text systemLanguage="qsc">qsc</text>
		<text systemLanguage="qtc">qtc</text>
		<text systemLanguage="nan">nan</text>
		<text systemLanguage="yue">yue</text>
		<text systemLanguage="wuu">wuu</text>  
		<text systemLanguage="cdo">cdo</text>
		<text systemLanguage="hak">hak</text>    
		<text systemLanguage="id">id</text>
		<text systemLanguage="ja">ja</text>
		<text systemLanguage="ko">ko</text>
		<text systemLanguage="th">th</text>  
		<text>other</text>
	</switch>
</svg>



<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="-50 -100 100 120" xmlns="http://www.w3.org/2000/svg">
<switch font-family="DejaVu Sans" font-size="100px" text-anchor="middle">
	<text systemLanguage="gem">♂</text>
	<text systemLanguage="gew">♀</text>
	<text systemLanguage="gei">⚥</text>
	<text systemLanguage="geu">⚲</text>
	<text systemLanguage="geg">☿</text>
	<text systemLanguage="gen">⚪</text>
	<text systemLanguage="get">⚧</text>
	<g systemLanguage="ged">
		<text y="10" font-size="50px" font-weight="bold">d</text>
		<circle cx="2.5" cy="-57.5" r="22.5" fill="none" stroke="#000" stroke-width="9"/>
		<path d="m-14-74 33 33m0-33-33 33" fill="none" stroke="#000" stroke-width="7"/>
	</g>
	<text>?</text>
</switch>
</svg>

Animated SVG

This preview isn't animated. To see the original SVG, look here.

To see the animations, you need an SVG animation capable browser or viewer.

See also

Very accurate PNG versions can be compared:

Retrieved from "https://commons.wikimedia.org/w/index.php?title=SVG_examples&oldid=714201191"