SVG 텍스트

<text>요소는 SVG 그래픽 내에 텍스트를 마크업 할 때 사용합니다. 많은 속성 옵션을 제공하며, 그레디언트, 패턴, 클리핑 패스, 마스크 또는 필터에도 적용 할 수 있습니다. SVG 그래픽은 일반 그래픽 이미지와 달리 SVG 코드 내에서 쉽게 변경하고 편집 할 수 있어 그래픽에 확장 가능한 텍스트를 포함하는 매우 강력한 기능을 제공합니다.

<svg width="620" height="140" viewBox="0 0 620 140">
  <text 
    x="30" y="90" 
    fill="#ED6E46" font-size="100" font-family="'Leckerli One', cursive">
    evening
  </text>
</svg>

<!-- 링크: https://fonts.google.com/specimen/Leckerli+One -->
<link href="https://fonts.googleapis.com/css?family=Leckerli+One" rel="stylesheet">

텍스트가 SVG 뷰포트에 잘려 보인다면? 뷰포트 크기를 조정하세요.

기본 속성

SVG 뷰포트에 <text> 요소를 배치하는 속성입니다. x, y 속성은 절대좌표입니다. 추가적으로 dx, dy 속성을 사용하면 설정된 좌표에 상대적으로 위치 이동시킬 수 있습니다.

아래 코드는 x, y 축으로 위치를 잡은 후, dx 속성 값만큼 x축으로 상대적 위치 이동 시킵니다.

<svg>
  <text dx="50%" x="10%" y="50%">SVG</text>
</svg>

회전 속성

rotate 속성을 사용하면 글자 마다 회전을 시킬 수 있습니다. 설정한 회전 값 개수와 글자 수가 일치하지 않으면, 별도의 값이 설정되지 않은 글자는 마지막 설정 값을 따르게 됩니다.

<svg width="400" height="140" viewBox="0 0 400 140">
  <text 
    x="100" y="90" fill="#ED6E46" 
    font-size="100" font-family="'Leckerli One', cursive"
    rotate="4, 8, -8, -4, -20, -24, 48">
    evening
  </text>
</svg>

텍스트 길이 속성

textLength속성은 텍스트의 길이를 지정합니다. 텍스트 길이에 설정된 길이에 맞게 문자 사이의 공백을 조정합니다.

<svg width="600" height="140" viewBox="0 0 600 140">
  <text 
    x="100" y="90" fill="#ED6E46" 
    font-size="70" font-family="'Leckerli One', cursive"
    textLength="400">
    evening
  </text>
</svg>

길이 조정 속성

lengthAdjust 속성은 글자 간격, 글리프 크기가 텍스트 길이에 맞게 조정되도록 설정할 수 있습니다.

기본 값인 spacing 이 아닌, spacingAndGlyphs 값을 설정한 코드는 다음과 같습니다.

<svg width="600" height="140" viewBox="0 0 600 140">
  <text 
    x="100" y="90" fill="#ED6E46" 
    font-size="70" font-family="'Leckerli One', cursive"
    textLength="400"
    lengthAdjust="spacingAndGlyphs">
    evening
  </text>
</svg>

<tspan> 요소

<tspan>요소는 SVG에서 자동 줄 바꿈 또는 줄 바꿈을 지원하지 않기 때문에 중요합니다. 특정 단어나 글자를 개별적으로 조작하여 별도의 디자인을 수행할 수 있습니다. 개별 제어 할 때 새로운 좌표 설정 대신 이전 텍스트에 상대적으로 위치 설정이 가능합니다.

<svg width="775" height="600">
  <text 
    x="15" y="150" fill="#e13137" 
    font-size="60" font-family="'Leckerli One', cursive">
    Coca-Cola
    <tspan dy="-30" fill="#dfdfdf" font-size="60">is</tspan>
    <tspan dy="46" dx="-14" font-size="100">Cool!</tspan>
  </text>
</svg>

<tspan> 요소의 dy 속성 값으로 나열된 값을 설정 했을 때 각 글자 글리프의 행 높이를 조정할 수 있습니다. 이전 값에 이은 다음 값은 이전 값에 상대적으로 위치 이동됩니다.

<svg width="775" height="600">
  <text 
    x="15" y="150" fill="#e13137" 
    font-size="60" font-family="'Leckerli One', cursive">
    We
    <tspan dy="-30 30 30" dx="-10" fill="#dfdfdf" font-size="60">are</tspan>
    <tspan dy="45" dx="-14" font-size="100">Champion</tspan>
  </text>
</svg>

커닝

커닝은 특정 글자 간격을 조정합니다. kerning속성을 사용하여 사용중인 글꼴에 포함된 커닝 테이블을 기반으로 공간을 조정하거나 고유한 길이를 설정할 수 있습니다. 하지만 안타깝게도 현재 브라우저에서 지원되지 않습니다.

글자 간격 조정

letter-spacing 속성은 CSS 속성과 동일합니다. 글자 간격을 일괄적으로 적용합니다.

<svg>
  <text 
    x="20" y="60%" fill="#e13137" 
    font-size="60" font-family="'Leckerli One', cursive"
    letter-spacing="10">
    yamoo9
  </text>
</svg>

단어 간격 조정

word-spacing 속성 또한 CSS 속성과 동일합니다. 단어 간격을 일괄적으로 적용합니다.

<svg width="900" height="300">
  <text 
    x="20" y="60%" fill="#448aff" 
    font-size="40" font-family="'Leckerli One', cursive"
    letter-spacing="1"
    word-spacing="15">
    yamoo9 is nickname.
  </text>
</svg>

텍스트 꾸밈

text-decoration 속성 또한 CSS 속성과 동일합니다. 텍스트 밑줄, 윗줄, 가운데줄 처리가 가능합니다.

<svg width="900" height="300">
  <text 
    x="20" y="60%" fill="#448aff" 
    font-size="40" font-family="'Leckerli One', cursive"
    text-decoration="overline underline line-through">
    Text Decoration
  </text>
</svg>

패스를 따라 흐르는 텍스트

Adobe Illustrator에서 그려 봤던 것처럼 패스를 따라 흐르는 SVG 텍스트를 그릴 수도 있습니다. 결과를 구현하기 위해 먼저 SVG Path Builder를 이용해 패스 데이터 값을 도출합니다.

<path d="M100,300 Q200,200 350,300 Q550,450 700,300" />

다음 단계로 <defs> 요소를 사용해 재 사용할 <path> 데이터를 등록하고 식별 가능한 ID 값을 설합니다.

<defs>
  <path id="text-line" d="M100,300 Q200,200 350,300 Q550,450 700,300" />
</defs>

마지막 단계로 <textPath> 요소를 사용해 콘텐츠를 감싼 후, xlink:href 속성 값으로 <path> 요소의 ID 식별자를 대입하여 참조 시킵니다. 전체 코드는 아래와 같습니다.

<svg width="800" height="600">
  <defs>
    <path id="text-line" d="M100,300 Q200,200 350,300 Q550,450 700,300" />
  </defs>
  <text 
    x="20" y="60%" fill="#448aff" 
    font-size="30" font-family="'Leckerli One', cursive">
    <textPath xlink:href="#text-line">
      SVG text can use the textPath element and 
      path data to draw text that flows along the path.
    </textPath>
  </text>
</svg>

PreviousSVG 하이퍼링크 NextSVG 이미지

Last updated 5 years ago