제6장. SVG Styling

스타일 속성

스타일 속성이란
- visual 속성 : fill, stroke, colors 등
- text 속성 : font-size, text-decoration 등
- graphics 속성 : clipping, masking, filter, gradient, interactivity 등

속성 목록 [p.90-91]
- CSS 와 공통으로 사용되는 속성
- CSS 에 없는 속성 - SVG 에서만 사용

Styling Scenario

스타일 사용 방법
- SVG content used as an exchange format (style sheet language-independent)
- SVG content generated as the output from XSLT
- SVG content styled with CSS

스타일 언어 독립적 표현

표현속성(presentation attributes)으로 사용
- 표현이 단순, XML 속성과 호환성, XSLT로 생성 가능
예제

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="8cm" height="5cm" viewBox="0 0 800 500">
<rect x="100" y="100" width="600" height="300"
fill="red" stroke="blue" stroke-width="8"/>
</svg>

XSLT로 스타일 생성하기

초기 svg 파일

<?xml version="1.0" standalone="no"?>
<svg width="4cm" height="2.5cm" >
<rect x="0.5cm" y="0.5cm" width="3cm" height="3cm"/>
</svg>

변환 XSLT 파일

<?xml version="1.0" standalone="no"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

    
    <xsl:template match="/">
        <xsl:text disable-output-escaping="yes">
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
            "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
        </xsl:text>
        <xsl:apply-templates/>
    </xsl:template>

    
    <xsl:template match="rect">
        <xsl:copy>
            <xsl:copy-of select="@*"/>
            <xsl:attribute name="fill">red</xsl:attribute>
            <xsl:attribute name="stroke">blue</xsl:attribute>
            <xsl:attribute name="stroke-width">3</xsl:attribute>
        </xsl:copy>
    </xsl:template>

    
    <xsl:template match="*|@*|text()">
        <xsl:copy> <xsl:apply-templates select="*|@*|text()"/> </xsl:copy>
    </xsl:template>
</xsl:stylesheet>

결과 svg 파일

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="4cm" height="2.5cm">
    <rect x="0.5cm" y="0.5cm" width="3cm" height="1.5cm"
             fill="red" stroke="blue" stroke-width="3"/>
</svg>

CSS로 스타일 적용하기

외부 CSS 스타일시트 파일 적용
예제 : mystyle.css

rect {
      fill: red;
      stroke: blue;
      stroke-width: 8
}

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="8cm" height="5cm" viewBox="0 0 800 500">
<rect x="100" y="100" width="600" height="300"/>
</svg>

내부 CSS 스타일시트 사용
- 표현이 단순, XML 속성과 호환성, XSLT로 생성 가능
예제

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="8cm" height="5cm" viewBox="0 0 800 500">
   <defs>
      <style type="text/css"><![CDATA[
       rect {
            fill: red;
            stroke: blue;
            stroke-width: 8
         }
      ]]></style>
   </defs>
   <rect x="100" y="100" width="600" height="300"/>
</svg>

인라인 CSS 스타일 속성 사용
예제