브라우저 html svg에 다이어그램을 그립니다. SVG란 무엇인가: 사용의 장단점. SVG란 무엇인가
벡터 그래픽은 인쇄 매체에 널리 사용됩니다. 웹사이트에서는 SVG 벡터 그래픽을 추가할 수도 있습니다. (확장 가능한 벡터 그래픽). W3.org의 공식 사양을 보면 SVG는 2차원 그래픽을 XML로 기술하기 위한 언어로 설명되어 있습니다. SVG를 사용하면 벡터 그래픽 모양(예: 직선과 곡선으로 구성된 윤곽선), 이미지 및 텍스트를 만들 수 있습니다.
SVG의 장점
SVG는 래스터 그래픽에 비해 몇 가지 장점을 제공하며, 그 중 일부는 다음과 같습니다.
확장성
래스터 이미지는 픽셀로 구성되어 크기를 조정하면 품질이 떨어지는 반면 벡터 그래픽은 크기에 관계없이 비율을 유지합니다.
HTTP 요청 속도 향상
SVG 파일은 svg 태그를 사용하여 HTML 문서에 직접 삽입할 수 있으므로 브라우저가 요청할 필요가 없습니다. 결과적으로 성능이 향상되고 사이트 부하가 줄어듭니다.
스타일화 및 스크립트
svg 태그를 HTML 문서에 직접 포함하면 . 배경색, 테두리 투명도 등과 같은 개체 속성을 변경할 수 있습니다. 또한 를 사용하여 그래픽을 조작할 수도 있습니다.
이미지에 애니메이션을 적용하고 편집할 수 있습니다.
CSS 또는 JavaScript(JQuery)를 사용하는 요소 애니메이션을 사용하여 SVG 개체에 애니메이션을 적용할 수 있습니다. SVG 개체는 Inkscape 또는 Adobe Illustrator와 같은 텍스트 편집기나 벡터 그래픽 편집기를 사용하여 편집할 수 있습니다.
더 작은 파일 크기
SVG는 래스터 이미지에 비해 파일 크기가 더 작습니다.
SVG로 간단한 모양 만들기
사양에 따라 다음과 같은 몇 가지 기본 모양을 만들 수 있습니다. 직사각형, 원, 선, 타원, 폴리선 및 다각형 SVG를 사용하고 브라우저가 SVG 그래픽을 표시하려면 이러한 모든 그래픽 요소를 태그에 삽입해야 합니다. 꼬리표. 아래 예를 살펴보겠습니다.
선
에게 선을 그리다 SVG에서는 요소를 사용할 수 있습니다
위에서 볼 수 있듯이 선의 원점은 처음 두 속성 x1, x2로 표현되고, 선 좌표의 끝점은 y1, y2로 표현됩니다.
테두리의 색상과 너비를 정의하는 데 사용되는 두 가지 다른 속성인 스트로크와 스트로크 너비도 있습니다. 또한 인라인 스타일로 다음 속성을 정의할 수도 있습니다.
스타일="스트로크 너비:1; 스트로크:rgb(0,0,0);"
그녀는 결국 같은 일을 하게 됩니다.
파선
이 요소는 다음과 유사합니다.
직사각형
이것으로 직사각형 그리기도 쉽습니다
원
다음을 사용하여 원을 그릴 수도 있습니다.
처음 두 속성인 cx와 cy는 원 중심의 좌표를 정의합니다. 위의 예에서는 x 및 y 좌표로 102를 생성했습니다. 이러한 속성을 지정하지 않으면 0이 기본값으로 처리됩니다.
타원
태그를 사용하여 타원을 그릴 수 있습니다
다각형
요소 사용
벡터 그래픽 편집기 사용
보시다시피 HTML 문서에서 간단한 SVG 개체를 사용하는 것은 매우 쉽습니다. 그러나 객체가 더욱 복잡해지면 이 방법은 더 이상 이상적이지 않습니다.
다행히도 위에서 언급한 것처럼 벡터 그래픽 편집기를 사용할 수 있습니다. 예를 들어 어도비 일러스트레이터또는 잉크스케이프 .
Inkscape로 작업하는 경우,벡터 파일을 SVG 형식으로 저장한 다음 텍스트 코드 편집기에서 열 수 있습니다. 모든 코드를 복사하여 HTML 문서에 붙여넣습니다.
예를 들어, embed , iframe 및 object 태그를 사용하여 .svg 파일을 포함할 수 있습니다.
결과는 결국 같을 것이다.
*이 예에서는 이미지를 사용하고 있습니다.
오늘 우리는 SVG에 대해, 그것이 어떤 형식인지, 무엇과 함께 사용되는지, 그리고 사용할 가치가 있는지에 대해 이야기하겠습니다. 형식이 특별히 새로운 것은 아니지만 구현 덕분에 인기를 얻었습니다. 모든 최신 버전의 브라우저는 이미 이 형식에 대한 지원을 받았습니다.
그는 왜 그렇게 인기가 있습니까? 그리고 정확히 무엇이 다른 곳과 다른가요? 오늘 우리는 이러한 질문에 답하고 이러한 파일 형식으로 작업을 시작하기 위해 알아야 할 사항도 알려 드리겠습니다.
SVG란 무엇입니까?
SVG(Scalable Vector Graphics)는 웹 개발자를 위한 벡터 기반 형식입니다. 이러한 유형의 형식은 SVG가 벡터 형식이기 때문에 이미지를 품질 저하 없이 고해상도로 표시할 수 있기 때문에 인기가 높습니다.
이 마크업 언어 개발의 원동력은 1999년 W3C로 더 잘 알려진 월드 와이드 웹 컨소시엄(World Wide Web Consortium)에 의해 처음 제공되었습니다. W3C는 2차원 그래픽 인터페이스와 이미지를 만들기 위한 마크업 언어인 SVG의 개념을 제시했습니다.
실제로 사용
SVG가 인기를 끄는 이유는 무엇이며 점점 더 많은 디자이너가 SVG를 사용하기 시작하는 이유는 무엇입니까? 매우 간단합니다. 정상적으로 작동합니다.
SVG는 다른 형식에 비해 가볍습니다. 이 형식에는 놀라운 가능성이 있습니다. 플래그, 기호, 인터페이스 요소. 그리고 이것은 그것이 어떻게 사용될 수 있는지에 대한 작은 목록일 뿐입니다. 이를 사용하는 가장 큰 장점은 벡터 형식이라는 것입니다. 즉, 모든 디스플레이에서 사용할 수 있습니다. 해상도에 관계없이 모든 곳에서 동일하게 표시됩니다.
SVG 파일은 파일이 정적 이미지로 저장되므로 관리가 매우 쉽습니다. SVG를 사용하여 매우 간단하지만 아름다운 애니메이션을 만들어 웹사이트에 상호작용성을 추가할 수 있습니다.
사용할 수 있는 몇 가지 예는 다음과 같습니다.
- 로고
- 배경 이미지
- 버튼으로 사용
- 카드
- 다이어그램 또는 그림
일반적으로 SVG는 반응형 웹사이트, 애니메이션 및 기타 동적 효과를 만들 때 가장 자주 사용됩니다.
SVG 사용의 장점
그렇다면 왜 SVG를 선호하여 일반적인 JPG나 GIF를 버려야 할까요? 프로젝트에서 이를 계속 사용해야 하는 데에는 몇 가지 이유가 있습니다.
- SVG는 벡터 형식이므로 이미지 크기가 사용자의 디스플레이 해상도에 따라 달라지고 SVG가 완벽하게 적합한 반응형 사이트에 사용할 가치가 있습니다.
- SVG 이미지는 XML을 사용하여 속성을 정의하므로 훨씬 더 압축할 수 있습니다.
- SVG 이미지는 조작하기가 매우 쉬우며 색상 변경, 그림자, 필터, 흐림 효과 및 기타 다양한 효과를 추가할 수 있는 디자이너에게 더 많은 가능성을 열어줍니다.
- SVG는 이해하기 매우 쉽습니다
- SVG는 개방형 웹 표준에서 작동합니다.
- 일반 텍스트 코드 편집기를 사용하여 SVG를 만들 수 있습니다. 이를 통해 귀하의 행동이 어느 정도 자유로워지며, 이는 모두 귀하의 필요와 이 분야의 전문 지식 수준에 따라 달라집니다.
SVG 사용의 단점
SVG가 얼마나 많은 이점을 갖고 있는지 알고 아마 충격을 받았을 것입니다. 그리고 아마도 그들은 단점이 없다고 생각했을 것입니다. 하지만 아닙니다. 분명히 몇 가지가 있으며 그 중 일부는 다음과 같습니다.
- Explorer 8 이하와 같은 이전 브라우저는 지원되지 않습니다.
- SVG는 벡터 형식이고 다양한 모양과 선을 만드는 데 사용되므로 사진에는 사용할 수 없습니다.
무엇 향후 계획?
SVG의 미래는 이제 막 시작되었습니다. 모바일용으로 승인된 이미지 형식(및 표준)으로서 SVG는 계속해서 탄력을 받을 것입니다.
SVG 파일은 확장 가능한 벡터 그래픽 파일입니다. 좀 더 정확하게 말하면 2차원 그래픽을 기술하기 위한 언어이다. 그 기반은 XML 마크업 언어였습니다.
이 형식에는 여러 가지 장점이 있습니다. 벡터 이미지이므로 SVG 이미지는 크기가 어떻게 조정되든 품질을 유지합니다. SVG 이미지는 상호 작용 및 애니메이션을 지원합니다. SVG는 W3C 표준입니다. 즉, 우수한 고품질 지원을 제공합니다. 그래픽 편집기뿐만 아니라 모든 텍스트 편집기에서도 SVG 파일을 만들 수 있습니다.
XML 기반 SVG 이미지는 검색 및 색인 생성이 가능하고 스크립팅 및 압축이 가능합니다.
그리지 않고 그리기로 넘어가기 전에, 어떤 프로그램에서든 표시하기에 충분한 빈 svg 파일의 구조를 살펴보겠습니다.
1.
2.
3.
4.
5.
편의상 줄에 번호가 매겨져 있습니다. 첫 번째 줄에는 XML 문서의 표준 선언이 포함됩니다.
두 번째 줄은 문서의 DTD 스키마를 나타냅니다. 세 번째 줄은 생성된 문서의 크기를 600 x 600 픽셀로 설정합니다. 첫 번째 태그 속성
원.
원을 만들려면 빈 svg 파일에 줄을 추가하세요.
속성은 원의 중심(cx 및 cy) 좌표와 반지름(r)입니다. 이 경우 좌표의 원점은 워크시트의 왼쪽 상단에 있습니다. 전체 SVG 파일:
정확히 문서 중앙에 반경 100픽셀의 원이 생성됩니다. 채우기 색상, 획, 레이어 또는 기타 효과에 대한 지침이 없었기 때문에 원은 획 없이 그려지고 검은색으로 채워지는데, 이는 Inkscape에서 문서를 열 때 볼 수 있는 것입니다. 문서에는 레이어가 없다는 점에 유의하세요.
속성 지정 CX, CY그리고 아르 자형표준입니다. 원의 획과 채우기를 설정하고 획 두께도 6픽셀로 설정해 보겠습니다.
채우기= "녹색" 획= "노란색" 획-너비= "6"/>
채우기는 녹색으로 설정되고 획은 노란색으로 설정됩니다.
재미있는 점은 이 문서에서 레이어를 생성하면 생성된 레이어가 아닌 어딘가에 원 그리기가 나타나는 것을 볼 수 있다는 것입니다. 해당 속성은 빨간색으로 강조 표시됩니다. 채우기나 획 없이 원을 만들어야 하는 경우 해당 속성의 값을 없음으로 설정하세요.
뇌졸중 = "없음"
채우기의 투명도를 변경하려면 속성을 추가하세요. 불투명, 예를 들어 불투명도= "0.5"채우기의 투명도를 2배로 줄이고 획의 투명도를 변경하려면 속성을 추가합니다. 획 불투명도, 예를 들어 획 불투명도= "0.5"획의 투명도를 2배로 줄입니다.
직사각형, 정사각형.
직사각형 설정은 다음과 같습니다
직사각형(정사각형)의 속성 직사각형왼쪽 위 모서리의 좌표와 직사각형의 너비 및 높이를 나타냅니다. 채우기 및 획 설정은 동일하게 보입니다.
음, 결국에는 사각형이 있는 원이군요
투명성을 변경하기 위해 이미 알려진 접근 방식을 사용합니다. 속성을 추가합니다. 불투명채우기 및 속성의 경우 획 불투명도개요를 위해.
계속됩니다.
이 게시물은 사이트의 벡터 그래픽 기본 사항을 다루는 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 모양
공식 사양에 따르면 태그를 사용하여 SVG를 사용하여 직사각형, 원, 선, 타원, 폴리선 또는 다각형 등 간단한 개체를 그릴 수 있습니다. svg.태그를 이용한 간단한 선 선시작점(x1 및 x2)과 끝점(y1 및 y2)이라는 두 개의 매개변수만 사용합니다.
또한 획 및 획 너비 속성이나 스타일을 추가하여 색상과 너비를 설정할 수도 있습니다.
스타일="스트로크 너비:1; 스트로크:rgb(0,0,0);"
파선
구문은 이전 구문과 유사하며 태그가 사용됩니다. 폴리라인, 기인하다 포인트들포인트 설정:
직사각형
ret 태그에 의해 호출되면 다음과 같은 속성을 추가할 수 있습니다.
원
태그로 호출 원, 속성을 사용하는 예에서는 아르 자형반경을 설정하고, CX그리고 싸이중심 좌표를 지정합니다.
타원
태그로 호출 타원, 비슷하게 작동합니다 원, 그러나 두 개의 반경을 지정할 수 있습니다 - RX그리고 리:
다각형
태그로 호출 다각형, 다각형의 변 수가 다를 수 있습니다.
편집기 사용
예제에서 볼 수 있듯이 기본 SVG 모양을 그리는 것은 매우 간단하지만 객체는 훨씬 더 복잡할 수 있습니다. 이를 위해서는 파일을 SVG 형식으로 저장한 다음 텍스트 편집기에서 편집할 수 있는 Adobe Illustrator 또는 Inkscape와 같은 벡터 그래픽 편집기를 사용해야 합니다. Embed, iframe 및 개체를 사용하여 페이지에 SVG를 삽입할 수 있습니다.
OpenClipArt.org의 iPod 이미지를 예로 들 수 있습니다.
모두들 행복한 승리의 날을 보내세요! 그리고 오늘 저는 우리가 알아볼 시리즈의 첫 번째 기사를 쓰고 있습니다. SVG란 무엇이고 어떻게 사용하는가?.
SVG(확장 가능한 벡터 그래픽) 2차원 그래픽을 표현하는 언어이다. XML. 이 기술은 점차 추진력을 얻고 있으며 그 이유는 다음과 같습니다.
- svg 모양의 크기를 조정할 때 모양이 항상 다시 그려지므로 항상 픽셀화 없이 부드럽고 아름다운 이미지를 볼 수 있습니다.
- 브라우저는 서버로부터 이미지를 요청할 필요가 없습니다. 직접 그리니까 생산성이 높아져요
- 일반 HTML 요소와 같은 CSS를 사용하거나 JavaScript를 사용하여 객체의 스타일을 지정할 수 있습니다.
- CSS 및 JavaScript를 사용하여 편집하거나 애니메이션화할 수 있습니다.
- 더 작은 크기
그럼 왜 필요한지, 왜 일반 이미지보다 좋은지 이미 이해하셨을 거라 생각하고, 이제 사용법에 대해 알아보겠습니다.
우선, 모든 수치가 태그에 있어야 한다는 점은 주목할 가치가 있습니다. svg, 이제 그려보자 선. 태그는 라인을 표시하는 데 사용됩니다. 선에는 다음과 같은 속성이 있습니다.
- x1- 시작 x 좌표
- x2- 끝 x 좌표
- y1- 시작 y 좌표
- y2- 끝 y 좌표
- 획 너비- 선의 폭
- 뇌졸중- 선 색상
하지만 지금 바로 그려야 한다면 어떨까요? 여러 줄? 여러 태그 사용 선별로 좋지 않을 것입니다. 이에 대한 태그가 있습니다 폴리라인.
태그에서 폴리라인속성이 있어요 포인트들, 여기서 우리는 좌표를 나타냅니다. 엑스그리고 와이쉼표로 구분한 다음 공백을 만들고 다음 지점의 좌표 등을 씁니다. 여기에 속성이 있다는 점에 유의하세요. 채우다, 어떤 형식으로든 색상을 지정할 수 있습니다. CSS, 줄 사이의 공간을 채울 것입니다. 줄 사이의 공백을 비우려면 값을 지정하십시오. 없음.
좀 더 복잡한 모양으로 넘어가서 그려봅시다 직사각형.
직사각형을 그리려면 태그를 사용해야 합니다. 직사각형, 속성에서 너비그리고 키나타내다 너비그리고 키따라서 나머지 속성은 이미 익숙하며 선과 완전히 동일한 기능을 수행합니다.
원을 그리려면 태그를 사용하세요. 원및 속성 CX, 싸이그리고 아르 자형좌표를 설정하려면 원의 중심그리고 그 사람 반지름.
또 다른 요소 - 타원원과 똑같은 방식으로 그려지지만 축을 따라 반경을 직접 설정할 수 있습니다 엑스그리고 축을 따라 와이. 태그는 렌더링하는 데 사용됩니다. 타원
철회해야 하는 경우 다면체 도형, 오각형과 같은 태그를 사용하세요. 다각형
기인하다 포인트들태그에 다각형속성과 동일하게 작동합니다. 포인트들태그에 폴리라인.
개체가 매우 복잡한 경우 벡터 그래픽 편집기를 사용하여 거기에 그린 다음 간단히 이렇게 삽입할 수 있습니다.
SVG지원됨 즉.씨 9 버전, 모질라 파이어 폭스와 함께 1.5 , 구글 크롬와 함께 3.0 그리고 오페라와 함께 8.0 .
이것으로 기사를 마칩니다. 그것은 크지 만 간단했습니다. 다음 연구에서 우리는 이 흥미로운 기술을 계속해서 연구할 것입니다. 하지만 그게 전부입니다. 행운을 빌어요!
