Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<div class="container">
  <h1 class="title">SVG <code>text</code>element Cheat sheet </h1> 
  <div class="item">
  <h3>Stroke width 2.5</h3>
  <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="50px">
  <text width="100%" height="100%" x="10" y="20" stroke-width="2.5" fill="red" stroke="red" > TRIPTI RAHANGDALE
    </text>
</svg>
  </div>
    <div class="item">
  <h3>Text anchor- start|middle|end</h3>
  <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="70px">
  <text width="100%" height="100%" x="50" y="20" style="text-anchor: start"> Start</text>
  <text width="100%" height="100%" x="50" y="40" style="text-anchor: middle"> Middle</text>
  <text width="100%" height="100%" x="50" y="60" style="text-anchor: end"> End</text>
</svg>
  </div>  
<div class="item">
  <h3>textlength 150</h3>
  <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="50px">
  <text width="100%" textlength="150" height="100%" x="10" y="20" stroke-width="0.5" fill="red" stroke="red" text-anchor="start"> TRIPTI RAHANGDALE
    </text>
</svg>
  </div>
  <div class="item">
  <h3>tspan- relative position </h3>
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="50px">
  <text width="100%" height="100%" x="10" y="20" stroke-width="0.5" fill="red" stroke="red" text-anchor="start"> T
    <tspan dy="10" dx="-5">R</tspan>
    <tspan dy="5" dx="-5">I</tspan>
    <tspan dy="-5" dx="-5">P</tspan>
    <tspan dy="-5" dx="-5">T</tspan>
    <tspan dy="5" dx="-5">I</tspan>
    <tspan dy="-10" dx="10">R</tspan>
    <tspan dy="5" dx="-10">A</tspan>
    <tspan dy="5">H</tspan>
    <tspan dy="5">A</tspan>
    <tspan dy="-5">N</tspan>
    <tspan dy="5">G</tspan>
    <tspan dy="-5">D</tspan>
    <tspan dy="5">A</tspan>
    <tspan dy="5">L</tspan>
    <tspan dy="-10">E</tspan>
    </text>
</svg>
  </div>
  <div class="item">
  <h3>tspan- absolute position </h3>
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="50px">
  <text width="100%" height="100%" x="10" y="20" stroke-width="0.5" font-size="1.4rem"> 
    <tspan y="20" x="0">By absolute position bring text in new line.</tspan>
    <tspan y="35" x="0">It is visaully in a new line.</tspan>
    </text>
</svg>
  </div>
  <div class="item">
  <h3>tspan- Rotate Each character </h3>
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="50px">
  <text width="100%" height="100%" x="10" y="20" stroke-width="0.5" fill="red" stroke="red" text-anchor="start"> 
    <tspan dy="15" rotate="30">TRIPTI</tspan>
    <tspan dx="15" dy="0 5 2 -7 5 -2 -4 -6 -10 5" rotate="30 45 60 260 190 240 80 75 90 120">RAHANGDALE</tspan>
    smile
    </text>
</svg>
  </div>
<div class="item">
  <h3>subscript & superscript</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="50px">
  <text width="100%" height="100%" x="10" y="30" stroke-width="0.5" fill="red" stroke="red" text-anchor="start"> 
    TRIPTI<tspan style="baseline-shift: sub;">&#129322;</tspan>
    RAHANGDALE <tspan style="baseline-shift: super;">&#128540;</tspan>
    </text>
</svg>
  </div>
  <div class="item">
  <h3>transform, writing-mode</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="280px">
  <text width="100%" height="100%" x="10" y="30" fill="red" transform="rotate(90 10 30)"> 
    Rotated 90 deg
    </text>
  <text width="100%" height="100%" x="50" y="30" fill="red"  style="writing-mode: tb">Writing mode</text>
  <text width="100%" height="100%" x="100" y="10" fill="red" style="font-size: 1rem; writing-mode: tb; glyph-orientation-vertical: 0" >Glyph Orien(only supported in safari)</text>
</svg>
  </div>
    <div class="item">
  <h3>text along the path</h3>
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="280px">
  <defs>
    <path id="curve" d="M 0 30 Q 50 70 130 40 Q 180 0 290 30" fill="none" stroke="black" />
    <path id="sharp-corner" d="M 10 70 L 70 70 L 70 70 L 70 130 " fill="none" stroke="black"/>
    <path id="half-arc" d="M 150 80 A 50 50 0 1 1 160 160 " fill="none" stroke="black"/>
     <path id="random" d="M 10 150 L 90 150 A 50 50 0 1 1 110 240 L 90 260 "fill="none"/>
  </defs>
  <use xlink:href="#curve"/>
  <text> <textpath xlink:href="#curve"> I will move along the Curve.
    </textpath>
    </text>
  <use xlink:href="#sharp-corner" />
  <text>
    <textpath xlink:href="#sharp-corner">I'm a sharp corner</textpath>
  </text>
  <use xlink:href="#half-arc" />
  <text style="text-anchor: middle;">
    <textpath xlink:href="#half-arc" startOffset="50%">I'm at center</textpath>
  </text>
  <use xlink:href="#random" />
  <text>
    <textpath xlink:href="#random">random path without line. Without line</textpath>
  </text>
 
</svg>
  </div>
  <h2 class="subtitle">Key points:</h2>
  <ul class="notes">
    <li>There is a <code>switch</code> element, which gives ability to dispaly multiple languages in single document.User viewing the document can see the language as per the their language preference. This can be useful for Brochure, cards etc. Define the language for each text like this: systemLanguage="en" or systemLanguage="fr-CA" or systemLanguage="langaugecode followedby countrycode". A fallback langauge is always a good choice. More info <a href="https://www.w3.org/TR/SVG/struct.html#SwitchElement">here ></a> </li>
    <li>It supports bidirectional text like left-to-right, right-to-left.</li>
    <li>Cliping, masking, transformations like SVG shapes is supported. Text decoration is supported like underline etc.</li>
    <li>You should always use <code>tspan</code>s within a <code> text </code>element to group related lines, not only to allow them to be selected as a unit, but also because it adds structure to your document.</li>
    <li> glyph-orientation-vertical property only works in safari</li>
  </ul>
</div>
              
            
!

CSS

              
                html {
  font-size: 62.5%;
}

body {
  font-family: "Muli", sans-serif;
  color: #3a3434;
  font-size: 1.6rem;
  line-height: 1.5;
}
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  grid-gap: 2.4rem 1.6rem;
  max-width: 100rem;
  margin: 0 auto 1.6rem;
  font-size: 1.6rem;
  font-weight: normal;
  padding: 1.6rem;
}

code {
  text-transform: lowercase;
  color: #354835;
  padding: 0.2rem 0.8rem;
  background: #dbdad97d;
  border-radius: 3px;
  border: 1px solid #dbdad97d;
}

svg {
  border: 1px solid #dbdad97d;
  width: 28rem;
  margin: 1.6rem 0.8rem 0;
}

h3 {
  position: absolute;
  top: -1.6rem;
  left: 0.8rem;
  background-color: white;
  color: #78297d;
  font-size: 1.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  text-transform: uppercase;
}

.title {
  grid-column: 1/-1;
  justify-self: center;
  text-transform: uppercase;
  color: #354835;
  font-size: 3.2rem;
  font-weight: bold;
  margin: 1.6rem 0;
}

text {
  fill: #3a3434;
  stroke: #3a3434;
}

.item {
  position: relative;
  border: 1px solid #78297d;
  text-align: center;
}

.notes, .subtitle {
  grid-column: 1/-1;
}

.notes {
  padding-left: 1.6rem;
}

.subtitle {
  margin-bottom: 0.8rem;
  font-size: 2rem;
  font-weight: bold;
  border-bottom: 3px solid #78297d;
  padding-bottom: 0.2rem;
  color: #354835;
}

.notes li {
  padding-bottom: 0.8rem;
  list-style: disc;
}
              
            
!

JS

              
                
              
            
!
999px

Console