SVG를 사용한 예. 객체 태그를 사용하여 SVG 파일을 포함한 그래픽 삽입

XML로 2차원 그래픽을 기술하기 위한 언어입니다. SVG에서는 벡터 그래픽(직선과 곡선으로 구성된 경로 등), 이미지, 텍스트 등 세 가지 유형의 개체를 허용합니다.

SVG가 2011년 8월부터 W3C 권장 사항에 포함되었음에도 불구하고 이 기술은 래스터 이미지에 비해 여러 가지 장점이 있지만 웹 프로젝트에서는 실제로 사용되지 않습니다. 이번 강의 시리즈에서는 웹 페이지에서 SVG 요소를 사용하여 작업하는 방법을 소개합니다.

SVG의 장점

해상도 독립성

래스터 이미지는 해상도에 따라 다릅니다. 특정 배율로 크기를 조정하면 그래픽이 눈에 띄지 않는 모양으로 나타납니다. 벡터 그래픽의 경우 원칙적으로 이러한 상황은 불가능합니다. 모든 것이 배율이 변경되면 자동으로 다시 계산되는 수학적 표현으로 표현되고 어떤 조건에서도 품질이 유지되기 때문입니다.

HTTP 요청 수 줄이기

SVG는 svg 태그를 사용하여 HTML 문서에 직접 삽입할 수 있으므로 브라우저는 그래픽을 제공하기 위해 어떤 요청도 할 필요가 없습니다. 이 접근 방식은 웹 사이트의 로딩 특성에 좋은 영향을 미칩니다.

스타일 및 스크립트

svg 태그를 포함하면 CSS를 사용하여 그래픽 스타일을 쉽게 지정할 수도 있습니다. 배경색, 투명도, 테두리 등과 같은 개체 속성을 변경할 수 있습니다. JavaScript를 사용하여 비슷한 방식으로 그래픽을 조작할 수 있습니다.

편집 및 애니메이션이 용이함

SVG 객체는 CSS 또는 JavaScript를 사용하여 애니메이션을 적용할 수 있습니다. SVG 개체는 텍스트 편집기를 사용하여 수정할 수도 있습니다.

더 작은 파일 크기

SVG는 래스터 그래픽에 비해 파일 크기가 더 작습니다.

기본 SVG 모양

사양에 따르면 선, 다중선, 직사각형, 원, 타원 등 여러 가지 기본 모양을 그릴 수 있습니다. 모든 요소는 태그에 삽입되어야 합니다. . 기본 요소를 자세히 살펴보겠습니다.

선

SVG에 선을 표시하려면 요소를 사용하십시오. . 그는 시작과 끝이라는 두 지점을 결정해야 하는 부분을 그립니다.

세그먼트의 시작은 x1 및 y1 속성에 의해 결정되고 끝점은 x2 및 y2 속성의 좌표에 의해 결정됩니다.

선의 색상과 너비를 각각 정의하는 데 사용되는 두 가지 다른 속성(획 및 획 너비)도 있습니다.

이 개체는 다음과 유사합니다. , 그러나 요소를 사용하여 한 번에 여러 선을 그릴 수 있습니다.

요소 점의 좌표를 지정하는 데 사용되는 points 속성을 포함합니다.

직사각형은 요소를 사용하여 그려집니다. . 너비와 높이를 결정해야 합니다.

원을 표시하려면 요소를 사용합니다. . 다음 예에서는 r 속성에 정의된 반경 100의 원을 만듭니다.

처음 두 속성 cx와 cy는 중심 좌표를 정의합니다. 위의 예에서는 두 좌표 모두에 대해 값을 102로 설정했습니다. 기본값은 0입니다.

타원을 표시하려면 요소를 사용합니다. . 원과 동일하게 작동하지만 rx 및 ry 속성을 사용하여 x 및 y 반경을 구체적으로 지정할 수 있습니다.

요소 삼각형, 육각형 등의 다면체 모양을 표시합니다. 예를 들어:

벡터 그래픽 편집기 사용

간단한 SVG 개체를 HTML로 출력하는 것은 쉽습니다. 그러나 개체의 복잡성이 증가함에 따라 이 방법을 사용하면 많은 양의 작업이 필요할 수 있습니다.

하지만 어떤 벡터 그래픽 편집기든 사용할 수 있습니다(예: 어도비 일러스트레이터또는 잉크스케이프) 객체를 생성합니다. 이와 같은 도구가 있는 경우 HTML 태그에 그래픽을 인코딩하는 것보다 필요한 개체를 그리는 것이 훨씬 쉽습니다.

파일의 벡터 그래픽 명령을 HTML 문서로 복사할 수 있습니다. 또는 embed , iframe 및 object 요소 중 하나를 사용하여 .svg 파일을 포함할 수 있습니다.

결과는 동일합니다.

브라우저 지원

SVG는 IE 버전 8 이하를 제외한 대부분의 최신 브라우저에서 잘 지원됩니다. 하지만 이 문제는 JavaScript 라이브러리를 사용하여 해결할 수 있습니다. 작업을 더 쉽게 하기 위해 ReadySetRaphael.com 도구를 사용하여 SVG 코드를 Raphael 형식으로 변환할 수 있습니다.

먼저 라이브러리를 다운로드하여 HTML 문서에 포함시킵니다. 그런 다음 .svg 파일을 로드하고, 로드한 후 결과 코드를 복사하여 함수에 붙여넣습니다.

body 태그에는 식별자가 rsr인 다음 div 요소를 배치합니다.

그리고 모든 것이 준비되었습니다.

시리즈의 다음 튜토리얼에서는 CSS에서 SVG 개체의 스타일을 지정하는 방법을 살펴보겠습니다.

이 게시물은 사이트의 벡터 그래픽 기본 사항을 다루는 SVG(Scalable Vector Graphic)에 대한 일련의 기사 중 첫 번째입니다.

벡터 그래픽은 인쇄에 널리 사용됩니다. 웹사이트의 경우 w3.org의 공식 사양에 따르면 SVG가 있습니다. XML로 2차원 그래픽을 기술하기 위한 언어. SVG에는 모양, 이미지, 텍스트라는 세 가지 유형의 개체가 포함되어 있습니다. SVG는 1999년부터 존재해 왔으며 2011년 8월 16일부터 W3C 권장 사항에 포함되었습니다. SVG는 몇 가지 중요한 장점이 있음에도 불구하고 웹 개발자들에 의해 매우 과소평가되었습니다.

SVG의 장점

• 스케일링 : 래스터 그래픽과 달리 SVG는 스케일링을 해도 품질이 떨어지지 않아 레티나 개발에 사용하기 편리합니다.
• HTTP 요청 감소: SVG를 사용하면 서버 호출 수가 감소하고 그에 따라 사이트 로딩 속도가 증가합니다.
• 스타일 지정 및 스크립팅: CSS를 사용하면 배경, 투명도, 테두리 등 사이트의 그래픽 설정을 변경할 수 있습니다.
• 애니메이션 및 편집: 자바스크립트를 사용하면 SVG에 애니메이션을 적용할 수 있을 뿐만 아니라 텍스트 또는 그래픽 편집기(InkScape 또는 Adobe Illustrator)에서 편집할 수도 있습니다.
• 작은 크기: SVG 개체의 무게는 래스터 이미지보다 훨씬 가볍습니다.

기본 SVG 모양

태그를 이용한 간단한 선 선시작점(x1 및 x2)과 끝점(y1 및 y2)이라는 두 개의 매개변수만 사용합니다.

또한 획 및 획 너비 속성이나 스타일을 추가하여 색상과 너비를 설정할 수도 있습니다.

스타일="스트로크 너비:1; 스트로크:rgb(0,0,0);"

파선

직사각형

원

타원

다각형

편집기 사용

OpenClipArt.org의 iPod 이미지를 예로 들 수 있습니다.

기본 개념 및 사용법

SVG(Scalable Vector Graphics) 형식은 벡터 그래픽 표준 제품군의 일부입니다. 벡터 그래픽은 각 픽셀의 색상 정의가 일부 데이터 배열에 저장되는 래스터 그래픽과 다릅니다. 오늘날 인터넷에서 사용되는 가장 일반적인 래스터 형식은 JPEG, GIF 및 PNG이며 각각 고유한 장점과 단점이 있습니다.

일반적으로 사용되는 약어

• CSS: 계단식 스타일 시트
• GIF: 그래픽 교환 형식
• GUI: 그래픽 사용자 인터페이스
• HTML: 하이퍼텍스트 마크업 언어
• JPEG: 공동 사진 전문가 그룹
• PNG: 휴대용 네트워크 그래픽
• SVG: 확장 가능한 벡터 그래픽
• XML: 확장 가능한 마크업 언어

SVG 형식은 래스터 형식에 비해 몇 가지 장점이 있습니다.

• SVG 그래픽은 개별 픽셀마다 데이터를 저장할 필요가 없기 때문에 원본 파일에 저장하는 데 훨씬 적은 데이터가 필요한 수학적 공식을 사용하여 생성됩니다.
• 벡터 이미지의 크기가 더 잘 조정됩니다. 온라인에 게시된 이미지를 원래 크기 이상으로 확대하려고 하면 이미지가 왜곡되거나 픽셀화될 수 있습니다.

  이는 원본 픽셀 데이터가 특정 이미지 크기에 맞게 설계되었기 때문입니다. 크기를 조정할 때 이미지 렌더러는 새 픽셀을 채우는 데 어떤 데이터를 사용해야 하는지 추측합니다. 벡터 이미지는 크기 조정에 더 강합니다. 이미지 크기를 변경할 때 해당 수학 공식을 조정할 수 있습니다.

• 벡터 그래픽의 소스 파일 크기는 일반적으로 더 작으므로 SVG 그래픽은 래스터 그래픽보다 빠르게 로드되고 데이터 집약도가 낮습니다.
• SVG 이미지는 브라우저에 의해 렌더링되며 프로그래밍 방식으로 렌더링될 수 있습니다. 동적으로 변경될 수 있으므로 차트와 같은 데이터 기반 애플리케이션에 특히 적합합니다.
• 원본 SVG 이미지 파일은 텍스트 형식이므로 액세스 가능하고 검색 엔진 친화적입니다.

이 기사에서는 SVG 형식의 이점과 HTML5 웹 사이트 구축에 어떻게 도움이 되는지 알아보겠습니다.

SVG 기본

SVG 그래픽을 만드는 것은 JPEG, GIF 또는 PNG 파일을 만드는 것과 완전히 다른 프로세스를 사용합니다. JPEG, GIF 및 PNG 파일은 일반적으로 Adobe Photoshop과 같은 일종의 이미지 편집 프로그램을 사용하여 생성됩니다. SVG 이미지는 일반적으로 일종의 XML 기반 언어를 사용하여 생성됩니다. 이미지 뒤에 XML 코드를 생성하는 SVG 그래픽 편집용 그래픽 사용자 인터페이스가 있습니다. 그러나 이 기사에서는 XML을 사용하여 직접 작업한다고 가정합니다. SVG 이미지 편집 프로그램에 대한 정보는 섹션에서 찾을 수 있습니다.

목록 1은 2픽셀의 검은색 테두리가 있는 빨간색 원을 그리는 간단한 SVG XML 파일의 예를 보여줍니다.

목록 1. SVG XML 파일

위의 코드는 그림 1에 표시된 이미지를 생성합니다.

그림 1. 2픽셀의 검은색 테두리가 있는 빨간색 원

기본 기하학적 모양 만들기

SVG 그래픽으로 작업할 때 XML 태그는 기하학적 모양을 만드는 데 사용됩니다. 이러한 XML 요소는 표 1에 표시되어 있습니다.

표 1. SVG 그래픽 생성을 위한 XML 요소

선 요소

선 요소는 가장 단순한 그래픽 요소입니다. Listing 2에서는 수평선을 만드는 방법을 보여준다.

목록 2. 수평선 만들기

목록 2에 표시된 코드는 그림 2에 표시된 이미지를 생성합니다.

그림 2. 단순한 수평선

SVG 루트 태그에는 그리기 가능 영역을 정의하는 너비 및 높이 속성이 있습니다. 이러한 속성은 다른 HTML 요소의 높이 및 너비 속성과 동일한 방식으로 작동합니다. 이 경우 작업 영역이 사용 가능한 모든 공간을 차지하는 것으로 설정됩니다.

또한 이 예에서는 스타일 태그를 사용합니다. SVG 그래픽은 다양한 방법을 사용하여 콘텐츠에 스타일을 적용하는 것을 지원합니다. 이 문서의 스타일은 이미지를 쉽게 볼 수 있도록 하거나 그림을 렌더링하는 데 색상 및 선 너비와 같은 특정 속성이 필요할 때 포함됩니다. SVG 그래픽에 스타일을 적용하는 방법에 대한 자세한 내용은 섹션에서 확인할 수 있습니다.

작업공간을 기준으로 X 및 Y축의 시작 및 끝 좌표를 지정하여 선 정의를 생성할 수 있습니다. x1 및 y1 속성은 시작 좌표를 나타내고 x2 및 y2 속성은 선의 끝 좌표를 나타냅니다. 선을 그리는 방향을 바꾸려면 좌표만 바꾸면 됩니다. 예를 들어 이전 예제를 수정하면 목록 3과 같이 대각선을 만들 수 있습니다.

목록 3. 대각선 만들기

그림 3은 목록 3에 표시된 코드의 출력을 보여줍니다.

그림 3. 대각선

폴리라인 요소

파선은 여러 개의 선으로 구성된 그림입니다. Listing 4에서는 계단의 계단처럼 보이는 그림을 생성하는 예를 보여줍니다.

목록 4에 표시된 코드는 그림 4에 표시된 이미지를 생성합니다.

폴리라인은 points 속성을 사용하고 쉼표로 구분된 X 및 Y 좌표 쌍을 정의하여 생성됩니다. 표시된 예에서 첫 번째 점은 0.40으로 정의되며, 여기서 0은 X 좌표이고 40은 Y 좌표입니다. 그러나 이 세트는 SVG에만 정보를 제공하기 때문에 한 세트의 포인트로는 화면에 이미지를 표시하는 데 충분하지 않습니다. 렌더러가 시작 위치를 지정합니다. 시작점과 끝점(예: points="0.40 40.40")이라는 두 가지 이상의 점 세트가 필요합니다.

단순한 선을 그릴 때와 마찬가지로 선이 반드시 수평 또는 수직일 필요는 없습니다. 이전 예제에서 값을 변경하면 Listing 5와 같이 선으로 이루어진 불규칙한 모양을 얻을 수 있습니다.

목록 5. 들쭉날쭉한 선 만들기

목록 5의 코드는 그림 5에 표시된 이미지를 생성합니다.

그림 5. 들쭉날쭉한 선

직사각형 요소

직사각형을 생성하려면 목록 6에 표시된 대로 너비와 높이를 정의하기만 하면 됩니다.

목록 6. 직사각형 작성하기

목록 6의 코드는 그림 6에 표시된 이미지를 생성합니다.

그림 6. 직사각형

ret 태그를 사용하여 정사각형을 만들 수도 있습니다. 정사각형은 단순히 높이와 너비가 같은 직사각형입니다.

원 요소

원은 목록 7에 표시된 대로 원 중심과 반경의 X 및 Y 좌표를 정의하여 생성됩니다.

목록 7. 원 작성하기

목록 7의 코드는 그림 7에 표시된 이미지를 생성합니다.

그림 7. 원

cx 및 cy 속성은 캔버스를 기준으로 원의 중심 위치를 결정합니다. 반경은 원 너비의 절반이므로 결정 시 이미지의 전체 너비는 지정한 값의 2배가 된다는 점을 명심하세요.

타원 요소

기본적으로 타원은 목록 8에 표시된 것처럼 코드에 지정된 두 개의 반지름이 있는 원입니다.

목록 8. 타원 만들기

목록 8의 코드는 그림 8에 표시된 이미지를 생성합니다.

그림 8. 타원

이 경우 cx 및 cy 속성은 캔버스를 기준으로 중심 좌표도 정의합니다. 그러나 타원의 경우 rx 및 ry 속성을 사용하여 X축에 대해 하나의 반경을 정의하고 Y축에 대해 두 번째 반경을 정의합니다.

다각형 요소

다각형은 최소한 세 개의 변을 포함하는 기하학적 도형입니다. Listing 9에서는 간단한 삼각형을 생성한다.

목록 9. 삼각형 만들기

목록 9의 코드는 그림 9에 표시된 이미지를 생성합니다.

그림 9. 삼각형

폴리라인 요소 작업과 마찬가지로 폴리곤은 포인트 속성을 사용하여 X 및 Y 좌표 쌍을 정의하여 생성됩니다.

X축과 Y축을 따라 좌표 쌍을 추가하면 면 개수에 제한 없이 다각형을 만들 수 있습니다. 예를 들어, 이전 예제의 코드를 수정하면 목록 10과 같이 4면 다각형을 만들 수 있습니다.

목록 10. 4면 다각형 만들기

목록 10에 표시된 코드는 그림 10에 표시된 이미지를 생성합니다.

그림 10. 4면 다각형

다각형 태그를 사용하면 복잡한 모양의 기하학적 모양을 만들 수도 있습니다. 목록 11에서는 별 그림을 만듭니다.

목록 11. 별 만들기

목록 11에 표시된 코드는 그림 11에 표시된 이미지를 생성합니다.

그림 11. 별 다각형

경로 요소

경로 요소는 모든 그리기 요소 중에서 가장 복잡하므로 일련의 특수 명령을 사용하여 임의의 그림을 만들 수 있습니다. 경로 요소는 표 2에 나열된 명령을 지원합니다.

표 2. 경로 요소에서 지원되는 명령

이러한 명령은 대문자 또는 소문자로 사용할 수 있습니다. 명령이 대문자로 지정되면 절대 위치 지정이 적용됩니다. 소문자 명령을 사용하면 상대 위치 지정이 적용됩니다. 모든 명령의 사용 예를 제공하는 것은 이 문서의 범위를 벗어납니다. 그러나 다음은 이러한 명령 사용의 기본 사항을 보여주는 몇 가지 예입니다.

경로 요소를 사용하면 이 문서의 이전 예제에서 간단한 기하학적 모양을 만들 수 있습니다. 목록 12에서는 path 요소를 사용하여 정삼각형을 만듭니다.

목록 12. 경로 요소를 사용하여 삼각형 만들기

목록 12에 표시된 코드는 그림 12에 표시된 이미지를 생성합니다.

그림 12. 경로 요소를 사용하여 생성된 삼각형

명령 목록은 d 속성을 사용하여 정의됩니다. 이 예에서는 점으로 이동 명령(M150 0)으로 정의된 좌표 X 150 및 Y 0이 있는 점에서 그리기가 시작됩니다. 그런 다음 명령을 사용하여 점(L75 200)까지 선을 그립니다. 좌표 X = 75, Y = 200인 점에 선을 그립니다. 그 후 점에 선을 그리는 또 다른 명령을 사용하여 또 다른 선을 그립니다(L225 200). 마지막으로 스냅(Z) 명령을 사용하여 패턴을 닫습니다. 경로를 닫으려면 정의에 따라 현재 위치에서 도면의 시작점(이 경우 좌표가 X = 150, Y = 0인 점)까지 선을 그리기 때문에 Z 명령에는 좌표가 수반되지 않습니다.

주어진 예의 목적은 개념을 보여주기 위한 것이었습니다. 일반 삼각형만 생성해야 한다면 다각형 태그를 사용하는 것이 더 좋습니다.

경로 요소의 진정한 힘은 목록 13에 표시된 것처럼 사용자 정의 모양을 생성하는 기능입니다. 이 예는 W3C(World Wide Web Consortium) 문서에서 가져온 것입니다. 확장 가능한 벡터 그래픽(SVG) 1.1(2판)(섹션 참조).

목록 13. 경로 요소를 사용하여 사용자 정의 모양 만들기

목록 13에 표시된 코드는 그림 13에 표시된 이미지를 생성합니다.

그림 13. 경로 요소를 사용하여 생성된 사용자 정의 모양

경로 요소는 다이어그램 및 구불구불한 선과 같은 복잡한 디자인을 만드는 데 사용할 수 있습니다. 제공된 예에서는 여러 경로 요소를 사용합니다. 그림을 만들 때 SVG 루트 태그에 있는 하나의 그림 요소로 제한되지 않습니다.

필터 및 그라디언트

위의 많은 예에서 사용된 기본 CSS 스타일 외에도 SVG 그래픽은 필터 및 그라데이션 사용도 지원합니다. 이 섹션에서는 SVG 이미지에 필터와 그라디언트를 적용하는 방법을 알아봅니다.

필터

필터를 사용하여 SVG 이미지에 특수 효과를 적용할 수 있습니다. SVG는 다음 필터를 지원합니다.

• 페블렌드
• feColorMatrix
• feComponentTransfer
• fe복합
• feConvolveMatrix
• fe확산조명
• feDisplacementMap
• 페플러드
• feGaussianBlur
• fe이미지
• feMerge
• fe형태학
• fe오프셋
• 페스페큘러라이팅
• 태아
• fe난기류
• fe먼빛
• fePointLight
• feSpotLight

목록 14에서는 직사각형에 적용되는 그림자 효과를 만듭니다.

목록 14. 직사각형에 그림자 효과 만들기

목록 14에 표시된 코드는 그림 14에 표시된 이미지를 생성합니다.

그림 14. 직사각형의 그림자 효과

필터는 def 요소("정의"의 약어) 내부에 정의됩니다. 이 예의 필터에는 식별자(id) "f1"이 할당됩니다. 필터 태그 자체에는 X 및 Y 좌표는 물론 필터의 너비와 높이를 정의하는 속성이 있습니다. 필터 태그 내에서 필수 필터 요소를 사용하고 해당 속성을 원하는 값으로 설정합니다.

필터가 정의되면 에 표시된 대로 필터 속성을 사용하여 필터를 특정 도면과 연관시킵니다. url 값을 필터에 할당된 id 속성 값으로 설정합니다.

그라데이션

구배한 색상에서 다른 색상으로의 점진적인 전환을 나타냅니다. 그라디언트에는 선형과 방사형의 두 가지 주요 유형이 있습니다. 적용되는 그라디언트 유형은 사용하는 요소에 따라 결정됩니다. 다음 예에서는 선형 및 방사형 그래디언트를 타원에 적용하는 방법을 보여줍니다.

목록 15에서는 선형 그라데이션을 사용하여 타원을 만듭니다.

목록 15. 선형 그라데이션을 사용하여 타원 만들기

목록 15에 표시된 코드는 그림 15에 표시된 이미지를 생성합니다.

그림 15. 선형 그래디언트가 있는 타원

목록 16에서는 방사형 그라데이션을 사용하여 타원을 만듭니다.

목록 16. 방사형 그라데이션으로 타원 만들기

목록 16에 표시된 코드는 그림 16에 표시된 이미지를 생성합니다.

그림 16. 방사형 그라데이션이 있는 타원

필터와 같은 그라데이션은 def 요소 내에 정의됩니다. 각 그라데이션에는 식별자(id)가 할당됩니다. 색상과 같은 그라데이션 속성은 중지 요소를 사용하여 그라데이션 태그 내부에 설정됩니다. 그림에 그라디언트를 적용하려면 채우기 속성의 url 값을 원하는 그라디언트의 식별자(id)로 설정하세요.

텍스트 및 SVG

목록 17에 표시된 대로 기본 기하학적 모양을 만드는 것 외에도 SVG를 사용하여 텍스트를 생성할 수도 있습니다.

목록 17. SVG를 사용하여 텍스트 만들기

목록 17에 표시된 코드는 그림 17에 표시된 이미지를 생성합니다.

그림 17. SVG로 생성된 텍스트

이 예에서는 텍스트 요소를 사용하여 I love SVG 문장을 만듭니다. 텍스트 요소를 사용할 때 표시되는 실제 텍스트는 여는 텍스트 요소와 닫는 텍스트 요소 사이에 있습니다.

다양한 축을 따라, 심지어 경로를 따라 텍스트를 표시할 수도 있습니다. 목록 18에서는 텍스트가 호 모양의 경로로 표시됩니다.

목록 18. 호 모양 경로를 따라 텍스트 작성하기

목록 18에 표시된 코드는 그림 18에 표시된 이미지를 생성합니다.

그림 18. 호 모양 경로를 따라 배치된 텍스트

이 예에서는 추가 XML 네임스페이스 xlink 를 SVG 루트 태그에 추가합니다. 텍스트를 호화하는 데 사용되는 경로는 def 요소 내부에 생성되므로 경로 자체는 도면에서 렌더링되지 않습니다. 표시 텍스트는 xlink 네임스페이스를 사용하여 원하는 경로의 ID를 참조하는 textPath 요소 내에 중첩됩니다.

다른 SVG 그래픽과 마찬가지로 텍스트에 필터와 그라디언트를 적용할 수도 있습니다. 목록 19에서는 텍스트에 필터와 그라데이션을 적용합니다.

목록 19. 필터와 그라데이션을 사용하여 텍스트 만들기

목록 19에 표시된 코드는 그림 19에 표시된 이미지를 생성합니다.

그림 19. 필터와 그라데이션이 적용된 텍스트

웹 페이지에 SVG XML 코드 추가

SVG XML이 생성되면 여러 가지 방법으로 HTML 페이지에 포함될 수 있습니다. 첫 번째 방법은 목록 20에 표시된 대로 SVG XML 코드를 HTML 문서에 직접 삽입하는 것입니다.

목록 20. SVG XML을 HTML 문서에 직접 삽입하기

이 방법은 아마도 가장 간단하지만 재사용을 장려하지는 않습니다. SVG XML은 .svg 확장자를 가진 파일로 저장할 수 있습니다. SVG 그래픽을 .svg 파일로 저장하면 embed, object 및 iframe 요소를 사용하여 웹 페이지에 포함할 수 있습니다. 목록 21에는 embed 요소를 사용하여 SVG XML 파일을 삽입하는 코드가 나와 있습니다.

목록 21. embed 요소를 사용하여 SVG XML 파일 포함하기

목록 22에는 object 요소를 사용하여 SVG XML 파일을 포함하는 코드가 나와 있습니다.

목록 22. object 요소를 사용하여 SVG XML 파일 포함하기

목록 23에서는 iframe 요소를 사용하여 SVG XML 파일을 포함하는 코드를 보여줍니다.

목록 23. iframe 요소를 사용하여 SVG XML 파일 포함하기

이러한 방법 중 하나를 사용하면 동일한 SVG 그래픽을 여러 페이지에 포함하고 원본 .svg 파일을 편집하여 업데이트할 수 있습니다.

결론

이 문서에서는 SVG 형식을 사용하여 그래픽을 만드는 기본 사항을 다룹니다. 기본 제공 기하학 요소를 사용하여 선, 직사각형, 원 등과 같은 기본 기하학적 모양을 만드는 방법을 배웠으며, 경로 요소를 사용하여 일련의 명령을 실행하여 복잡한 디자인을 만드는 방법도 배웠습니다. 예를 들어 점으로 이동, 점에 선 그리기, 점에 호 그리기 등이 있습니다. 또한 이 문서에서는 텍스트가 포함된 그래픽을 포함하여 SVG 그래픽에 필터 및 그래디언트를 적용하는 방법과 HTML 페이지에 SVG 그래픽을 포함하는 방법에 대해 설명합니다.