[CSS] SVG : 백터 그래픽 도형 표현하기

728x90

CSS : SVG를 이용하여 백터 그래픽 만들기

이번 시간에는 SVG태그와 CSS속성을 이용하여 백터 그래픽을 표현해보겠습니다! 😄

#1. SVG란 무엇인가요!?

스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다.
SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다.

• 인터넷 익스플로러9 버전 이상부터 지원됩니다.
• XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다.
• 벡터 방식이기 때문에 확대하거나 축소가 가능합니다.
• DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다.

#2. SVG 예제

다음은 SVG를 이용하여 도형 및 라인을 표현하는 예제입니다! 아래 코드를 보며 함께 알아가봅시다!

사각형(rect)

💡 코드 보기

<div class="svgBox svg1">
    <svg>
        <rect fill="#F48FB1" width="100" height="100" x="30" y="30" />
    </svg>
    <svg>
        <rect fill="#F48FB1" width="100" height="100" x="30" y="30" stroke="#880E4F" stroke-width="5" />
    </svg>
    <svg>
        <rect fill="#F48FB1" width="100" height="100" x="30" y="30" rx="20" ry="20" />
    </svg>
    <svg>
        <rect fill="#F48FB1" width="100" height="100" x="30" y="30" rx="20" ry="20" stroke="#880E4F" stroke-width="5" />
    </svg>
    <svg>
        <rect fill="#F48FB1" width="100" height="100" x="30" y="30" rx="40" ry="40" />
    </svg>
    <svg>
        <rect fill="#F48FB1" width="100" height="100" x="30" y="30" rx="60" ry="60" stroke="#880E4F" stroke-width="5" />
    </svg>
</div>

원형(circle, ellipse)

💡 코드 보기

<div class="svgBox svg1">
    <svg>
        <circle fill="#F48FB1" r="60" cx="80" cy="80" />
    </svg>
    <svg>
        <circle fill="#F48FB1" r="60" cx="80" cy="80" stroke="#880E4F" stroke-width="5" />
    </svg>
    <svg>
        <ellipse fill="#F48FB1" rx="60" ry="40" cx="80" cy="80" />
    </svg>
    <svg>
        <ellipse fill="#F48FB1" rx="60" ry="40" cx="80" cy="80" stroke="#880E4F" stroke-width="5" />
    </svg>
    <svg>
        <ellipse fill="#F48FB1" rx="40" ry="60" cx="80" cy="80" />
    </svg>
    <svg>
        <ellipse fill="#F48FB1" rx="40" ry="60" cx="80" cy="80" stroke="#880E4F" stroke-width="5" />
    </svg>
</div>

다각형(polygon)

💡 코드 보기

<div class="svgBox svg3">
    <svg>
        <polygon class="st0" points="114.2,7.67 143.91,143.75 11.21,101.44 " fill="#F48FB1"/>
    </svg>
    <svg>
        <polygon class="st0" points="100.44,14.37 145.81,65.95 123.82,131.03 56.47,144.53 11.1,92.95 33.08,27.87 " fill="#F48FB1"/>
    </svg>
    <svg>
        <polygon class="st0" points="79.31,15.25 126.39,33.12 147.04,79.05 129.17,126.13 83.24,146.78 36.16,128.91 15.51,82.98,33.38,35.9 " fill="#F48FB1"/>
    </svg>
    <svg>
        <polygon class="st0" points="69.48,14.15 96.85,51.78 143.36,50.56 116.04,88.22 131.57,132.07 87.31,117.73 50.4,146.05,50.37,99.52 12.02,73.17 56.26,58.77 " fill="#F48FB1"/>
    </svg>
    <svg>
        <polygon class="st0" points="151.66,97.63 109.86,101.84 118.3,142.99 85.77,116.41 62.64,151.47 58.44,109.67 17.28,118.11,43.87,85.58 8.8,62.45 50.6,58.25 42.16,17.09 74.69,43.68 97.82,8.61 102.02,50.41 143.18,41.97 116.59,74.5 " fill="#F48FB1"/>
    </svg>
    <svg>
        <polygon class="st0" points="82.25,82.11 134.26,128.82 81.08,83.45 95.7,151.81 79.34,83.84 50.99,147.74 77.71,83.14,17.22,118.17 76.8,81.62 7.27,74.4 76.96,79.85 24.95,33.14 78.13,78.51 63.51,10.15 79.87,78.12 108.22,14.22 81.5,78.82,141.99,43.79 82.41,80.34 151.94,87.56 " fill="#F48FB1"/>
    </svg>
</div>

패스(path)

💡 코드 보기

<div class="svgBox svg4">
    <svg class="svg">
        <path fill="none" stroke="#880E4F" stroke-width="2" d="M7,154.667c0-82.358,65.152-149,145.667-149"/>
    </svg>
    <svg class="svg">
        <path fill="none" stroke="#880E4F" stroke-width="2" d="M151.534,123.547c-33.711,33.711-88.369,33.711-122.08,0
        c-26.97-26.969-26.97-70.695,0-97.665c21.575-21.576,56.556-21.576,78.131,0c17.261,17.26,17.261,45.245,0.001,62.504
        c-13.809,13.809-36.196,13.809-50.005,0c-11.046-11.046-11.046-28.956,0-40.002c8.837-8.837,23.166-8.837,32.003,0
        c7.069,7.07,7.07,18.532,0,25.602c-5.656,5.657-14.826,5.657-20.482,0c-4.524-4.524-4.524-11.86,0-16.385"/>
    </svg>
    <svg class="svg">
        <path fill="none" stroke="#880E4F" stroke-width="2" d="M82.671,81.243c50.565,48.259,14.182,69.191-2.135,1.229
        c16.316,67.962-25.611,65.895-2.46-0.122c-23.151,66.017-57.304,41.617-2.004-1.432c-55.3,43.049-70.84,4.057-0.912-2.288
        c-69.929,6.345-61.919-34.86,0.47-2.417c-62.389-32.442-33.374-62.777,1.703-1.78c-35.076-60.997,5.73-70.826,2.395-0.577
        c3.335-70.249,42.981-56.458,2.326,0.81c40.655-57.268,66.554-24.232,1.521,1.938c65.033-26.17,68.953,15.62,0.23,2.452
        C152.526,92.225,133.236,129.502,82.671,81.243z"/>
    </svg>
    <svg class="svg">
        <path fill="none" stroke="#880E4F" stroke-width="2" d="M131.502,129.683c-44.4-42.871-49.621-39.867-34.943,20.102
        c-14.678-59.969-20.694-60.265-40.261-1.983c19.566-58.281,14.666-61.783-32.799-23.436C70.963,86.018,68.733,80.421,8.573,86.918
        c60.16-6.497,61.31-12.409,7.692-39.569c53.617,27.16,57.781,22.808,27.864-29.131c29.917,51.938,35.772,50.527,39.189-9.441
        c-3.417,59.969,2.272,61.948,38.075,13.245c-35.803,48.703-32.086,53.443,24.869,31.726C89.308,75.465,89.87,81.462,150.03,93.884
        C89.87,81.462,87.102,86.812,131.502,129.683z"/>
    </svg>
    <svg class="svg">
        <path fill="none" stroke="#880E4F" stroke-width="2" d="M58.665,139.312c0-6.873,42-6.873,42-13.747s-42-6.874-42-13.748
        s42-6.874,42-13.748c0-6.872-42-6.872-42-13.744c0-6.874,42-6.874,42-13.747c0-6.877-42-6.877-42-13.753
        c0-6.874,42-6.874,42-13.748c0-6.878-42-6.878-42-13.757s42-6.879,42-13.758"/>
    </svg>
    <svg class="svg">
        <path fill="none" stroke="#880E4F" stroke-width="2" d="M93.108,91.478c42.049,30.58-13.048,57.425-13.347,6.503
        c0.299,50.922-55.041,24.58-13.405-6.381c-41.636,30.961-55.545-28.728-3.37-14.458c-52.176-14.27-14.181-62.359,9.204-11.649
        c-23.385-50.71,37.901-50.989,14.846-0.067c23.055-50.922,61.484-3.179,9.309,11.565C148.521,62.245,135.157,122.058,93.108,91.478
        z"/>
    </svg>
</div>

라인(line, polyline)

💡 코드 보기

<div class="svgBox svg5">
    <svg>
        <line x1="0" y1="0" x2="200" y2="200" stroke="#0D47A1" stroke-width="2" fill="none" />
    </svg>
    <svg>
        <line x1="50" y1="50" x2="200" y2="200" stroke="#0D47A1" stroke-width="2" fill="none" />
    </svg>
    <svg>
        <line x1="100" y1="100" x2="200" y2="200" stroke="#0D47A1" stroke-width="2" fill="none" />
    </svg>
    <svg>
        <polyline points="21,17.2 21,139.2 117,52.2" stroke="#0D47A1" stroke-width="2" fill="none" />
    </svg>
    <svg>
        <polyline points="21,17.2 21,139.2 122,28.2 141,139.2" stroke="#0D47A1" stroke-width="2" fill="none" />
    </svg>
    <svg>
        <polyline points="21,17.2 21,139.2 122,28.2 141,139.2 23.5,11.7" stroke="#0D47A1" stroke-width="2" fill="none" />
    </svg>
</div>

클리핑 마스크(Clip-path)

💡 코드 보기

<div class="svgBox svg6">
    <svg>
        <image xlink:href="img/bg_01.png" width="160" height="160" />
    </svg>
    <svg>
        <image xlink:href="img/bg_01.png" width="160" height="160" clip-path="circle(60px at center)" />
    </svg>
    <svg>
        <clipPath id="clipPath1">
            <polygon points="138.749,152.277 9.988,95.596 123.456,12.427 " />
        </clipPath>
        <image xlink:href="img/bg_01.png" width="160" height="160" clip-path="url(#clipPath1)"/>
    </svg>
    <svg>
        <clipPath id="clipPath2">
            <polygon points="69.48,14.15 96.85,51.78 143.36,50.56 116.04,88.22 131.57,132.07 87.31,117.73 50.4,146.05,50.37,99.52 12.02,73.17 56.26,58.77 " />
        </clipPath>
        <image xlink:href="img/bg_01.png" width="160" height="160" clip-path="url(#clipPath2)"/>
    </svg>
    <svg>
        <clipPath id="clipPath3">
            <polygon points="151.66,97.63 109.86,101.84 118.3,142.99 85.77,116.41 62.64,151.47 58.44,109.67 17.28,118.11,43.87,85.58 8.8,62.45 50.6,58.25 42.16,17.09 74.69,43.68 97.82,8.61 102.02,50.41 143.18,41.97 116.59,74.5 " />
        </clipPath>
        <image xlink:href="img/bg_01.png" width="160" height="160" clip-path="url(#clipPath3)"/>
    </svg>
    <svg>
        <clipPath id="clipPath4">
            <polygon points="79.31,15.25 126.39,33.12 147.04,79.05 129.17,126.13 83.24,146.78 36.16,128.91 15.51,82.98,33.38,35.9 " />
        </clipPath>
        <image xlink:href="img/bg_01.png" width="160" height="160" clip-path="url(#clipPath4)"/>
    </svg>
</div>

SVG로 이미지를 클리핑 마스크도 가능합니다. 정말 신기방기하죠?! 😆 다음 예제를 살펴보며 알아가보겠습니다!👍

클리핑 마스크(Clip-path)

SVG

💡 HTML 코드 보기

<div class="svgBox svg7">
    <svg>
        <text fill="#F48FB1" x="7" y="110" font-family="SCoreDream" font-size="70" font-weight="900">SVG</text>
    </svg>
    <svg>
        <pattern id="pattern1" patternunites="useSpaceOuUse" width="100%" height="100%">
            <image xlink:href="img/bg_01.png" width="160" height="160" />
        </pattern>
        <text fill="url(#pattern1)" x="7" y="110" font-family="SCoreDream" font-size="70" font-weight="900">SVG</text>
    </svg>
    <div class="text-wrap">
        <div class="text-clip">SVG</div>
    </div>
    <div class="text-wrap">
        <div class="text-clip c2">SVG</div>
    </div>
    <div class="text-wrap">
        <div class="text-clip c3">SVG</div>
    </div>
    <div class="text-wrap">
        <div class="text-clip c4">SVG</div>
    </div>
</div>

💡 CSS 코드 보기

@font-face {
    font-family: 'SCoreDream';
    font-weight: 900;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/score/SCoreDreamBlack.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/score/SCoreDreamBlack.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/score/SCoreDreamBlack.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/score/SCoreDreamBlack.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/score/SCoreDreamBlack.ttf') format("truetype");
    font-display: swap;
}
.svg7 {display: flex;}
.text-wrap {
    background-color: #e3f3fd;
    width: 160px;
    height: 160px;
    margin: 6px;
    display: inline-block;
    overflow: hidden;
}
.text-clip {
    font-size: 70px;
    text-align: center;
    font-family: 'SCoreDream';
    text-transform: uppercase;
    line-height: 170px;
    -webkit-text-fill-color: #0d47a1;
}
.text-clip.c2 {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-image: url(img/bg_01.png);
    background-size: 100%;
}
.text-clip.c3 {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-image: linear-gradient(60deg, skyblue, rgb(121, 138, 206) );
}
.text-clip.c4 {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-stroke: 2px #0d47a1;
}

ps. 당신은 토매토에게 맛난 영양분을 줄 수 있습니다....🍅

728x90

저작자표시

'CSS' 카테고리의 다른 글

[CSS] CSS 애니메이션에 대해 알아보자! (4)	2022.09.08
[CSS] SVG : 애니메이션 구현하기 (5)	2022.09.08
[CSS] 애니메이션 실습 : 로딩 (3)	2022.08.30
[CSS] 애니메이션 실습 : 움직이는 박스 (2)	2022.08.30
[CSS] 요소를 숨기는 방법 (6)	2022.08.26

🍅 토매토🍅 의 냠냠 코딩 🌱

[CSS] SVG : 백터 그래픽 도형 표현하기

CSS : SVG를 이용하여 백터 그래픽 만들기

#1. SVG란 무엇인가요!?

#2. SVG 예제

사각형(rect)

원형(circle, ellipse)

다각형(polygon)

패스(path)

라인(line, polyline)

클리핑 마스크(Clip-path)

클리핑 마스크(Clip-path)

'CSS' 카테고리의 다른 글

댓글

JAVASCRIPT

HTML

CSS

티스토리툴바

[CSS] SVG : 백터 그래픽 도형 표현하기

CSS : SVG를 이용하여 백터 그래픽 만들기

#1. SVG란 무엇인가요!?

#2. SVG 예제

사각형(rect)

원형(circle, ellipse)

다각형(polygon)

패스(path)

라인(line, polyline)

클리핑 마스크(Clip-path)

클리핑 마스크(Clip-path)

'CSS' 카테고리의 다른 글

관련글

댓글

JAVASCRIPT

HTML

CSS

티스토리툴바