SVG그래픽생성법

1.어도비 일러스트 툴을 이용해 오브젝트 생성
2. 다른이름으로 저장- 확장자 형식을 svg로 선택후 저장.
3. svg options 에서 svg 버전을 1.1로 선택. fonts type는 convert to outline으로 선택. svg code 버튼 클릭.
4.<svg version 부터 </svg>까지 복사 후 html <body> 안에 붙여넣기.

 

<!--

    이미지는 원본사이즈보다 크기를 키우면 깨진다. 하지만 벡터 이미지는 크기를 키워도 잘 깨지지 않는다.

-->

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>SVG-Scalable Vector Graphics</title>

<style>

    *{ margin: 0; padding: 0; }

    .wrap { width: 100%; height: 100vh; overflow: hidden; }

    .wrap svg { width: 100%; height: 100%; margin-top: -40px;}

</style>

</head>

 

<body>

    <div class="wrap">

        <svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"

     y="0px" width="1920px" height="1080px" viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">

<linearGradient id="center_1_" gradientUnits="userSpaceOnUse" x1="346.9131" y1="807.9863" x2="1475.1935" y2="222.4191">

<stop  offset="0" style="stop-color:#3CFFEB"/>

<stop  offset="0.1622" style="stop-color:#3CE4F1"/>

<stop  offset="0.3679" style="stop-color:#3CC8F7"/>

<stop  offset="0.5759" style="stop-color:#3CB5FC"/>

<stop  offset="0.7857" style="stop-color:#3CA9FE"/>

<stop  offset="1" style="stop-color:#3CA5FF"/>

</linearGradient>

<path id="center" fill="url(#center_1_)" d="M251.767,1003.599c39.061,18.786,50.39,40.22,92.685,16.285

c107.486-60.822,235.694-73.624,353.279-35.417c33.523,10.892,64.262,36.068,96.762,45.703

c28.568,8.471,65.192-24.287,95.294-36.184c69.472-27.459,144.89-37.07,218.975-27.842c37.052,4.616,73.414,13.597,108.173,27.375

c26.869,10.652,68.461,44.229,92.559,38.563c32.084-7.544,65.431-35.98,98.324-46.884c34.966-11.589,71.403-18.934,108.157-21.507

c74.386-5.208,150.283,8.158,217.978,39.62c15.993,7.431,31.342,19.844,47.753,25.747c21.054,7.574,22.872,1.139,43.708-10.545

c29.584-16.587,61.845-29.685,94.586-38.916c0-175.404,0-518.117,0-579c0-82.496-209.947-212.989-554.93-212.989

S936.092,0,936.092,0H0l0.124,965.028C85.958,954.062,178.311,968.268,251.767,1003.599z"/>

<linearGradient id="right_1_" gradientUnits="userSpaceOnUse" x1="1793.9697" y1="493.1074" x2="2023.0945" y2="386.2648">

<stop  offset="0.35" style="stop-color:#41A5FF;stop-opacity:0.15"/>

<stop  offset="0.423" style="stop-color:#52A5FF;stop-opacity:0.2455"/>

<stop  offset="0.5647" style="stop-color:#6EA5FF;stop-opacity:0.4308"/>

<stop  offset="0.708" style="stop-color:#81A5FF;stop-opacity:0.6181"/>

<stop  offset="0.8524" style="stop-color:#8DA5FF;stop-opacity:0.807"/>

<stop  offset="1" style="stop-color:#91A5FF"/>

</linearGradient>

<path id="right" fill="url(#right_1_)" d="M1920,741.462c-66,0-147-46.766-180-103.923l-52.039-90.133

c-33-57.158-33-150.688,0-207.846L1740,249.428c33-57.158,114-103.923,180-103.923"/>

<linearGradient id="left_1_" gradientUnits="userSpaceOnUse" x1="13.0503" y1="622.751" x2="218.5703" y2="526.9154">

<stop  offset="0" style="stop-color:#3CFFEB;stop-opacity:0"/>

<stop  offset="0.1622" style="stop-color:#56E4F1;stop-opacity:0.1622"/>

<stop  offset="0.3679" style="stop-color:#70C8F7;stop-opacity:0.3679"/>

<stop  offset="0.5759" style="stop-color:#82B5FC;stop-opacity:0.5759"/>

<stop  offset="0.7857" style="stop-color:#8DA9FE;stop-opacity:0.7857"/>

<stop  offset="1" style="stop-color:#91A5FF"/>

</linearGradient>

<path id="left" fill="url(#left_1_)" d="M3,375c132.548,0,240,107.452,240,240c0,132.549-107.452,240-240,240"/>

</svg>

    </div>

</body>

</html>



 

<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="utf-8">

<title>svg</title>

<style>

    svg { width: 800px; height: 500px; background: lightblue; }

    .circleBox { fill: rgb(230, 200, 255); stroke: rgb(255, 255, 255); stroke-width: 5; }

    .rectBox {width: 200px; height: 150px; fill:rgb(255, 245, 152); }

    .top { stroke-width: 100; stroke: rgba(255, 230, 210, 0.6); 

        stroke-dasharray: 10 10;

        transition: all 0.5s ease-in;}

        /*transition 커튼효과: 요소가 움직일 때 중간단계의 모습을 만들어준다*/

        /*all: 모든 속성에 transition 적용. 0.5s: 진행시간(duration) 5초. ease-in: 베지어 곡선(가속도)*/

    svg:hover .top { transform:translateX(500px);}

        /*transform:translateX (요소를 X축으로 이동)*/

</style>

</head>

 

<body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

        <circle cx="150" cy="90" r="80" class="circleBox" />

        <rect x="300" cy="10" class="rectBox" />

        <line x1="0" y1="300" x2="300" y2="300" class="top" ></line>

    </svg>

</body>

</html>

'Coding' 카테고리의 다른 글

CSS 선수학습(2)  (0) 2021.07.12
html 선수학습(7)  (0) 2021.07.09
html 선수학습(5)  (0) 2021.07.07
html 선수학습(4)  (0) 2021.07.06
html 선수학습(3)  (0) 2021.07.05

+ Recent posts

티스토리툴바