Текст

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример text1.svg
     </desc>
   <text x="50" y="50">
    Простой текст
    </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример text2.svg
     </desc>
   <text x="10" y="50" font-family="Comic Sans MC" 
         font-size="24" fill="indigo">
    Цветной текст
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="300"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример text3.svg
     </desc>
   <text x="10" y="50"  
         style="font-family: Comic Sans MC; font-size: 24; fill: indigo">
    Цветной текст
   </text>
  
  <g font-family="Arial" font-size="40" stroke="black" stroke-width="1">
   <text x="10" y="100" fill="red">
  Red
   </text>
  
   <text x="10" y="150" fill="yellow">
  Yellow
   </text>
  
   <text x="10" y="200" fill="green">
  Green
   </text>
  
  </g>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример text4.svg
     </desc>
   <text x="10" y="30" font-family="Arial" 
         font-size="20"  text-decoration="none" >
    Обычный текст
   </text>
   <text x="10" y="65" font-family="Arial" 
         font-size="20"  text-decoration="underline" >
    Подчеркнутый текст
   </text>
   <text x="10" y="100" font-family="Arial" 
         font-size="20"  text-decoration="line-through" >
    Зачеркнутый текст
   </text>
   <text x="10" y="135" font-family="Arial" 
         font-size="20"  text-decoration="overline" >
   Текст под чертой
   </text>
   <text x="10" y="170" font-family="Arial" 
         font-size="20"  text-decoration="underline overline" >
   Две черты
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример text5.svg
     </desc>
     <defs>
    <style type="text/css">
      <![CDATA[
      text
      {
       font-family: Arial;
        font-size: 20;
      }
      text.obichniy
      {
        text-decoration: none;        
      }
      text.podcherknutiy
      {
      text-decoration: underline;      
      }
      text.zacherknutiy
      {
        text-decoration: line-through;        
      }
      text.podChertoy
      {
        text-decoration: overline;    
      }
      text.dveCherti
      {
        text-decoration: underline overline;        
      }
          
      ]]>
    </style>
</defs>
   <text x="10" y="30" class="obichniy" >
    Обычный текст
   </text>
   <text x="10" y="65" class="podcherknutiy" >
    Подчеркнутый текст
   </text>
   <text x="10" y="100" class="zacherknutiy" >
    Зачеркнутый текст
   </text>
   <text x="10" y="135" class="podChertoy" >
   Текст под чертой
   </text>
   <text x="10" y="170" class="dveCherti" >
   Две черты
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="480"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример text6.svg
     </desc>
   <text x="10" y="30" font-family="Arial" 
         font-size="20" font-weight="normal">
    Обычный текст
   </text>
   <text x="10" y="65" font-family="Arial" 
         font-size="20"   font-weight="bold" >
    Жирный текст
   </text>
   <text x="10" y="100" font-family="Arial" 
         font-size="20" font-weight="bolder">
    Текст bolder
   </text>
   <text x="10" y="135" font-family="Arial" 
         font-size="20"  font-weight="lighter" >
   Текст lighter
   </text>
   <text x="10" y="170" font-family="Arial" 
         font-size="20"  font-weight="100" >
   Текст 100
   </text>
   <text x="10" y="205" font-family="Arial" 
         font-size="20"  font-weight="200" >
   Текст 200
   </text>
   <text x="10" y="240" font-family="Arial" 
         font-size="20"  font-weight="300" >
   Текст 300
   </text>
   <text x="10" y="275" font-family="Arial" 
         font-size="20"  font-weight="400" >
   Текст 400
   </text>
   <text x="10" y="310" font-family="Arial" 
         font-size="20"  font-weight="500" >
   Текст 500
   </text>
   <text x="10" y="345" font-family="Arial" 
         font-size="20"  font-weight="600" >
   Текст 600
   </text> 
   <text x="10" y="380" font-family="Arial" 
         font-size="20"  font-weight="700" >
   Текст 700
   </text> 
   <text x="10" y="415" font-family="Arial" 
         font-size="20"  font-weight="800" >
   Текст 800
   </text> 
   <text x="10" y="450" font-family="Arial" 
         font-size="20"  font-weight="900" >
   Текст 900
   </text> 
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="200"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример text7.svg
     </desc>
   <text x="10" y="30" font-family="Arial" 
         font-size="20"  font-style="normal" >
    Обычный текст
   </text>
   <text x="10" y="65" font-family="Arial" 
         font-size="20"  font-style="italic" >
    Курсивный текст
   </text>
   <text x="10" y="100" font-family="Arial" 
         font-size="20"  font-style="oblique" >
    Курсивный текст
   </text>
  </svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="445"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример text8.svg
     </desc>
   <text x="10" y="30" font-family="Arial" 
         font-size="20"  font-stretch="normal" >
 font-stretch
   </text>
   <text x="10" y="65" font-family="Arial" 
         font-size="20"  font-stretch="wider" >
 font-stretch
   </text>
   <text x="10" y="100" font-family="Arial" 
         font-size="20"  font-stretch="normal" >
 font-stretch
   </text>
   <text x="10" y="135" font-family="Arial" 
         font-size="20"  font-stretch="narrower" >
 font-stretch
   </text>
   <text x="10" y="170" font-family="Arial" 
         font-size="20"  font-stretch="ultra-condensed" >
 font-stretch
   </text>
   <text x="10" y="205" font-family="Arial" 
         font-size="20"  font-stretch="extra-condensed" >
 font-stretch
   </text>
   <text x="10" y="240" font-family="Arial" 
         font-size="20"  font-stretch="condensed" >
 font-stretch
   </text>
   <text x="10" y="275" font-family="Arial" 
         font-size="20"  font-stretch="semi-condensed" >
 font-stretch
   </text>
   <text x="10" y="310" font-family="Arial" 
         font-size="20"  font-stretch="semi-expanded" >
 font-stretch
   </text>
   <text x="10" y="345" font-family="Arial" 
         font-size="20"  font-stretch="expanded" >
 font-stretch
   </text>
   <text x="10" y="380" font-family="Arial" 
         font-size="20"  font-stretch="extra-expanded" >
 font-stretch
   </text>
   <text x="10" y="415" font-family="Arial" 
         font-size="20"  font-stretch="ultra-expanded" >
 font-stretch
   </text>
  </svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="445"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример text9.svg
     </desc>
   <text x="10" y="30" font-family="Arial" 
         font-size="16"  kerning="auto" >
Кернинг
   </text>
   <text x="10" y="65" font-family="Arial" 
         font-size="16" kerning="10" >
Кернинг
   </text>
   <text x="10" y="100" font-family="Arial" 
         font-size="16"  kerning="15" >
Кернинг
   </text>      
   <text x="10" y="135" font-family="Arial" 
         font-size="16"  kerning="20" >
Кернинг
   </text>      
  </svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="160"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример text10.svg
     </desc>
   <text x="10" y="30" font-family="Arial" 
         font-size="16"  letter-spacing="normal" >
Кернинг
   </text>
   <text x="10" y="65" font-family="Arial" 
         font-size="16" letter-spacing="10" >
Кернинг
   </text>
   <text x="10" y="100" font-family="Arial" 
         font-size="16"  letter-spacing="15" >
Кернинг
   </text>      
   <text x="10" y="135" font-family="Arial" 
         font-size="16"  letter-spacing="20" >
Кернинг
   </text>      
  </svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="160"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример text11.svg
     </desc>
   <text x="10" y="30" font-family="Arial" 
         font-size="12"  word-spacing="normal" >
Интервал между словами
   </text>
   <text x="10" y="65" font-family="Arial" 
         font-size="12" word-spacing="10" >
Интервал между словами
   </text>
   <text x="10" y="100" font-family="Arial" 
         font-size="12"  word-spacing="15" >
Интервал между словами
   </text>      
   <text x="10" y="135" font-family="Arial" 
         font-size="12" word-spacing="20" >
Интервал между словами
   </text>      
  </svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="120" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример text12.svg
     </desc>
   <text x="105" y="30" font-family="Arial" 
         font-size="16" text-anchor="start">
  text-anchor
   </text>
   <text x="105" y="65" font-family="Arial" 
         font-size="16" text-anchor="middle">
  text-anchor
   </text>
   <text x="105" y="100" font-family="Arial" 
         font-size="16" text-anchor="end">
  text-anchor
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="210" height="190" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример text13.svg
     </desc>

     <defs>
    <style type="text/css">
      <![CDATA[
      text
      {
       font-family: Arial;
        font-size: 16;
      }
      text.ltr
      {
      direction:ltr;    
      unicode-bidi: bidi-override;  
      }
      text.rtl
      {
        direction:rtl;    
        unicode-bidi: bidi-override;    
      }
      ]]>
    </style>
</defs>
   <text x="50" y="30" class="ltr"  >
  Направление 
   </text>
   <text x="50" y="65" class="ltr">
  Direction
   </text>
   <text x="50" y="100" class="rtl" >
  Направление
   </text>
   <text x="50" y="135" class="rtl">
  Direction
   </text>
  
   <text x="50" y="170" direction="rtl" unicode-bidi="bidi-override">
  Просто текст
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="250" height="400" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример text14.svg
     </desc>
   <text x="125" y="30" writing-mode="lr" >
writing-mode="lr"
   </text>
   <text x="125" y="65" writing-mode="lr-tb">
writing-mode="lr-tb"
   </text>
   <text x="125" y="100" writing-mode="rl" >
 writing-mode="rl"
   </text>
   <text x="125" y="135" writing-mode="rl-tb">
writing-mode="rl-tb"
   </text>
   <text x="125" y="170" writing-mode="tb">
writing-mode="tb"
   </text>
   <text x="160" y="170" writing-mode="tb-rl">
writing-mode="tb-rl"
   </text>
  <!--Вспомогательные фигуры-->
  <line x1="125" y1="0" x2="125" y2="400" 
      stroke-width="1" stroke="blue"></line>
  <line x1="0" y1="170" x2="250" y2="170" 
      stroke-width="1" stroke="blue"></line>
  <line x1="160" y1="170" x2="160" y2="400" 
      stroke-width="1" stroke="blue"></line>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="450" height="300" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример text15.svg
     </desc>
   <text x="10" y="30" 
         glyph-orientation-horizontal="0">
         glyph-orientation-horizontal="0"
   </text>
   <text x="10" y="65" 
         glyph-orientation-horizontal="90">
         glyph-orientation-horizontal="90"
   </text>
   <text x="10" y="100" 
         glyph-orientation-horizontal="180" >
         glyph-orientation-horizontal="180"
   </text>
   <text x="10" y="135" 
         glyph-orientation-horizontal="270">
         glyph-orientation-horizontal="270"
   </text>
   <text x="10" y="170" 
         glyph-orientation-horizontal="-90">
         glyph-orientation-horizontal="-90"
   </text>
   <text x="10" y="205"
         glyph-orientation-horizontal="-180">
         glyph-orientation-horizontal="-180"
   </text>
   <text x="10" y="240"
         glyph-orientation-horizontal="-270">
         glyph-orientation-horizontal="-270"
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="450" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример text16.svg
     </desc>


   <text x="10" y="10" writing-mode="tb-rl" 
         glyph-orientation-vertical="0"> 
         glyph-orientation-vertical="0"
   </text>
   <text x="45" y="10" writing-mode="tb-rl"   
         glyph-orientation-vertical="90"> 
         glyph-orientation-vertical="90"
   </text>
   <text x="80" y="10" writing-mode="tb-rl" 
         glyph-orientation-vertical="180" > glyph-orientation-vertical="180"
   </text>
   <text x="115" y="10" writing-mode="tb-rl"  
         glyph-orientation-vertical="270"> glyph-orientation-vertical="270"
   </text>
  
   <text x="150" y="10" writing-mode="tb-rl" 
         glyph-orientation-vertical="-90">
         glyph-orientation-horizontal="-90"
   </text>
  
   <text x="185" y="10" writing-mode="tb-rl" 
         glyph-orientation-vertical="-180">
         glyph-orientation-vertical="-180"
   </text>
  
   <text x="220" y="10" writing-mode="tb-rl" 
         glyph-orientation-vertical="-270">
         glyph-orientation-vertical="-270"
   </text>
  
  
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="320" height="280" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример text17.svg
     </desc>


   <text x="30" y="30" font-size-adjust="0">
font-size-adjust="0"
   </text>
   <text x="30" y="65" font-size-adjust="0.4">
font-size-adjust="0.4"
   </text>
   <text x="30" y="100" font-size-adjust="0.5">
font-size-adjust="0.5"
   </text>
   <text x="30" y="135" font-size-adjust="1">
font-size-adjust="1"
   </text>
  
   <text x="30" y="170" font-size-adjust="1.1">
font-size-adjust="1.1"
   </text>
  
   <text x="30" y="205" font-size-adjust="1.2">
font-size-adjust="1.2"
   </text>
  
   <text x="30" y="240" font-size-adjust="1.3">
font-size-adjust="1.3"
   </text>
  
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="280" height="180" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример text18.svg
     </desc>


   <text x="30" y="30" 
         dominant-baseline="auto">
         dominant-baseline="auto"
   </text>
   <text x="30" y="65" 
         dominant-baseline="hanging">
         dominant-baseline="hanging"
   </text>
   <text x="30" y="100" 
         dominant-baseline="mathematical">
         dominant-baseline="mathematical"
   </text>
  
   <text x="30" y="135">
text
   </text>
  
  <!--Вспомогательные фигуры-->
  <line x1="10" y1="30" x2="250" y2="30" 
      stroke-width="1" stroke="blue"></line>
  <line x1="10" y1="65" x2="250" y2="65" 
      stroke-width="1" stroke="blue"></line>
  <line x1="10" y1="100" x2="250" y2="100" 
      stroke-width="1" stroke="blue"></line>
  <line x1="10" y1="135" x2="250" y2="135" 
      stroke-width="1" stroke="blue"></line>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="280" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
	<title>Лекция 4. Текст</title>
	<desc>
		Пример tspan1.svg
	</desc>
	
<g font-family="Arial" font-size="16" >
    <text x="30" y="30" fill="blue" >
      Быстрее,
        <tspan font-weight="bold" fill="red" > выше,</tspan>
      сильнее
    </text>
  </g>
  
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="280" height="100" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример tspan2.svg
     </desc>
   <text x="30" y="30" fill="blue" 
         font-family="Arial" font-size="16"  >
      Быстрее,
        <tspan font-weight="bold" 
               fill="red" > выше,</tspan>
      сильнее
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="280" height="100" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример tspan3.svg
     </desc>
   <text x="30" y="30" fill="blue" 
         font-family="Arial" font-size="16">
      Быстрее,
        <tspan font-weight="bold" fill="red" 
               dy="-10"> выше,</tspan>
      сильнее
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="280" height="100" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример tspan4.svg
     </desc>
   <text x="30" y="30" fill="blue" 
         font-family="Arial" font-size="16"  >
      Быстрее,
        <tspan font-weight="bold" fill="red" 
               dy="-10"> выше,</tspan>
           <tspan dy="10">сильнее</tspan>
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="280" height="100" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример tspan5.svg
     </desc>
   <text x="30" y="30" fill="blue" 
         font-family="Arial" font-size="16">
      Быстрее,
        <tspan font-weight="bold" fill="red" 
               dy="-10 10 -10 10"> выше,</tspan>
        <tspan dy="0">сильнее</tspan>
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="280" height="100" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример tspan6.svg
     </desc>
   <text x="30" y="30" fill="blue" font-family="Arial" 
         font-size="16"  >
      Быстрее,                       
        <tspan font-weight="bold" fill="red" 
               dy="-5 5 -5 5"> выше,</tspan>
        <tspan dy="-5 5 -5 5 -5 5 -5">
               сильнее</tspan>
      
   </text>
  
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="280" height="100" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример tspan7.svg
     </desc>

<g font-family="Arial" font-size="16" >
   <text x="30" y="30" fill="blue" >
      Быстрее,
        <tspan font-weight="bold" fill="red" 
               dx="30"> выше,</tspan>
      сильнее
   </text>
  </g>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="280" height="100" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример tspan8.svg
     </desc>
<g font-family="Arial" font-size="16" >
   <text x="30" y="30" fill="blue" >
      Быстрее,
        <tspan font-weight="bold" fill="red" 
               dx="10 10 10 10 "> выше,</tspan>
      сильнее
   </text>
  </g>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="280" height="100" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример tspan9.svg
     </desc>

<g font-family="Arial" font-size="16" >
   <text x="30" y="30" fill="blue" >
      Быстрее,
        <tspan font-weight="bold" fill="red" 
               dx="10 -5 10 -5 "> выше,</tspan>
      сильнее
   </text>
  </g>
  
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="280" height="100" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример tspan10.svg
     </desc>
   <text x="30" y="30" fill="blue" font-family="Arial" 
         font-size="16"  >
      Быстрее,                       
        <tspan font-weight="bold" fill="red" 
               dy="-5 5 -5 5" dx="5 5 5 5"> 
                  выше,
        </tspan>
        <tspan dy="-5 5 -5 5 -5 5 -5" 
               dx="5 5 5 5 5 5 5">
                  сильнее
        </tspan>
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="150" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример tspan11.svg
     </desc>
   <text fill="blue" font-family="Arial" 
         font-size="16">
        <tspan x="30 45 60 75 90" y="50">
        Верх и 
      </tspan>
      <tspan x="45 60 75" y="100">
         низ
      </tspan>
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="280" height="100" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример tspan12.svg
     </desc>
   <text fill="blue" font-family="Arial" 
         font-size="16"  >
        <tspan  x="30 40 50 60 70 80 90" 
               y="85 75 65 55 45 35 25 "> Быстрее, </tspan>                
        <tspan font-weight="bold" fill="red" 
               x=" 60 70 80 90"  y="85 75 65 55">
                выше,
        </tspan>
        <tspan x="90 100 110 120 130 140 150" 
               y="85 75 65 55 45 35 25 ">
                сильнее
        </tspan>
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="280" height="100" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример tspan13.svg
     </desc>
<g font-family="Arial" font-size="40" >
   <text x="5" y="50" fill="blue" >
        <tspan  rotate="45 45 45 45 45"> Вкривь</tspan>
        <tspan font-weight="bold" fill="red" 
               rotate="15">и</tspan>
     <tspan  rotate="-45 -45 -45 -45 -45">вкось</tspan>
   </text>
  </g>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="280" height="250" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример tspan14.svg
     </desc>
<g font-family="Arial" font-size="16">
   <text x="30" y="30" fill="blue" >
      Быстрее,
        <tspan font-weight="bold" fill="red" 
               baseline-shift="baseline" > выше,</tspan>
      сильнее
   </text>
   <text x="30" y="80" fill="blue" >
      Быстрее,
        <tspan font-weight="bold" fill="red" 
               baseline-shift="sub" > выше,</tspan>
      сильнее
   </text>
   <text x="30" y="130" fill="blue" >
      Быстрее,
        <tspan font-weight="bold" fill="red" 
               baseline-shift="super" > выше,</tspan>
      сильнее
   </text>
   <text x="30" y="180" fill="blue" >
      Быстрее,
        <tspan font-weight="bold" fill="red" 
               baseline-shift="-100%" > выше,</tspan>
      сильнее
   </text>
    
   <text x="30" y="230" fill="blue" >
      Быстрее,
        <tspan font-weight="bold" fill="red" 
               baseline-shift="5" > выше,</tspan>
      сильнее
   </text>
  </g>
  
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="280" height="400" 
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <title>Лекция 4. Текст</title>
     <desc>
          Пример tspan15.svg
     </desc>

     <!--Эмблема пожарного крана-->
     <rect  x="30" y="30" 
           height="50" width="50" fill="none" 
           stroke="red" stroke-width="5"></rect>
     <text x="38" y="68" fill="red" 
           font-family="Arial" font-size="30">
     <tspan dx="-16">K</tspan>     
   </text>

   <!--Химическая формула воды-->
   <text x="100" y="68" fill="blue" 
         font-family="Arial" font-size="40">
       H
       <tspan dy="12" font-size="20" dx="-10">2</tspan>   
       <tspan dy="-12" dx="-10" >O</tspan>   
   </text>
   <!--Химическая формула серной кислоты-->
   <text x="50" y="120" fill="orange" 
         font-family="Arial" font-size="40">
       H
        <tspan  font-size="20" 
               baseline-shift="-10">2</tspan>   
        <tspan  baseline-shift="0" >S</tspan>   
        <tspan  baseline-shift="0" >O</tspan>  
        <tspan  font-size="20"
               baseline-shift="-10" >4</tspan>  
   </text>  
    
         <!--Эмблема, похожая на LaTeX-->
   <text x="50" y="180" fill="black" 
         font-family="Times" font-size="40">
       L
        <tspan font-size="32" 
                  dy="-5" dx="-21">A</tspan>   
        <tspan dy="5"  dx="-12">T</tspan>   
        <tspan dy="7"  dx="-13">E</tspan>  
        <tspan dy="-7" dx="-13">X</tspan> 
   </text> 
         <!--Биквадратное уравнение-->
   <text x="20" y="250" fill="green" 
         font-family="Comic Sans MC" font-size="30">
       ax
        <tspan baseline-shift="super" 
               font-size="20">4</tspan>
       +bx
        <tspan baseline-shift="super" 
               font-size="20">2</tspan>
       +с=0
   </text>
    
         <!--Эмблема хакеров-->
   <text x="20" y="300" fill="black" 
         font-family="Verdana" font-size="40">
          0 1 0
        <tspan x="20" y="340" >0 0 1</tspan>   
        <tspan  x="20" y="380"> 1 1 1</tspan>   
  
   </text>
  
   <!--Cноска на  икс в квадрате-->
   <text x="160" y="350" fill="black" 
         font-family="Verdana" font-size="60">
          X
        <tspan baseline-shift="super" font-size="30" 
               dx="-15"  >2</tspan>   
        <tspan dy="-50" font-size="15" 
               dx="-15"> 2</tspan>   
     </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример tref1.svg
     </desc>
<defs>
   <text id="myText" >
    Простой текст
   </text>
 </defs>
  
   <text>
<tref xlink:href="#myText" x="50" y="50"></tref>
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример tref2.svg
     </desc>
     <defs>
   <text id="myText"  >
    Простой текст
   </text>
  </defs>
  
   <text>
<tref xlink:href="#myText" x="30" y="50" 
      font-family="Arial" font-size="20" 
      fill="red"></tref>
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример textPath1.svg
     </desc>
     <defs>
     <!--Объект Path-->
     <path id="myPath" d="M25,75 C25,15 175,15 175,75"/> 
     </defs>

   <text font-size="24" text-anchor="middle" 
         fill="blue">
   <textPath xlink:href="#myPath" startOffset="50%">
          Текст на кривой
        </textPath>
   </text>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример textPath2.svg
     </desc>
     <defs>
     <!--Объект Path-->
     <path id="myPath" d="M25,75 C25,15 175,15 175,75" /> 
     </defs>

   <text 
         font-size="12" text-anchor="middle" fill="blue">
   <textPath xlink:href="#myPath" startOffset="50%">
          Текст на кривой
        </textPath>
   </text>
<!--Вспомогательная фигура-->
<path d="M25,75 C25,15 175,15 175,75" 
      style="fill:none; stroke:green;stroke-width:3"/> 
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример textPath3.svg
     </desc>
     <defs>
     <!--Объект Path-->
     <path id="myPath" d="M25,75 C25,15 175,15 175,75" /> 
     </defs>

   <text 
         font-size="12" text-anchor="middle" fill="blue">
   <textPath xlink:href="#myPath" startOffset="25%">
          Текст на кривой
        </textPath>
   </text>
<!--Вспомогательная фигура-->
<path d="M25,75 C25,15 175,15 175,75" 
      style="fill:none; stroke:green;stroke-width:3"/> 
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример textPath4.svg
     </desc>
     <defs>
     <!--Объект Path-->
     <path id="myPath" d="M25,75 C25,15 175,15 175,75" /> 
     </defs>

   <text 
         font-size="12" text-anchor="middle" fill="blue">
   <textPath xlink:href="#myPath" startOffset="75%">
          Текст на кривой
        </textPath>
   </text>
<!--Вспомогательная фигура-->
<path d="M25,75 C25,15 175,15 175,75" style="fill:none; stroke:green;stroke-width:3"/> 
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример textPath5.svg
     </desc>
     <defs>
     <!--Объект Path-->
     <path id="myPath" d="M25,75 C25,15 175,15 175,75" /> 
     </defs>

   <text font-size="12" text-anchor="middle" 
         fill="blue">
      <textPath xlink:href="#myPath" startOffset="95"  >
            Быстрее,
        <tspan font-weight="bold" fill="red" 
               dy="-10"> выше,</tspan>
        <tspan dy="10">сильнее</tspan>
      </textPath>
   </text>
<!--Вспомогательная фигура-->
<path d="M25,75 C25,15 175,15 175,75" 
      style="fill:none; stroke:green;stroke-width:3"/> 
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример textPath6.svg
     </desc>
     <defs>
     <!--Объект Path-->
     <path id="myPath" d="M25,75 C25,15 175,15 175,75" /> 
     </defs>
   <text 
         font-size="12" text-anchor="middle" fill="blue">
   <textPath xlink:href="#myPath" startOffset="50%" 
             glyph-orientation-horizontal="270">
          Текст на кривой
        </textPath>
   </text>
<!--Вспомогательная фигура-->
<path d="M25,75 C25,15 175,15 175,75" 
      style="fill:none; stroke:green;stroke-width:3"/> 
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="700" height="150"  
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 4. Текст</title>
     <desc>
          Пример textPath7.svg
     </desc>
     <defs>
     <!--Объект Path-->
<path id="myPath" 
      d="M25,75 Q100,25 175,75 T 325,75 T475, 75 T 625,75" /> 
     </defs>

   <text font-size="12" text-anchor="middle" 
         fill="blue">
     <textPath xlink:href="#myPath" startOffset="50%" >
          При рисовании кривых с повторяющимися фрагментами удобно использовать команду 
          T для упрощения кода. 
     </textPath>
   </text>
<!--Вспомогательная фигура-->
<path d="M25,75 Q100,25 175,75 T 325,75 T475, 75 T 625,75" 
      style="fill:none; stroke:green;stroke-width:2"/> 
</svg>