Vuejs에서 SVG를 사용하면 간단해집니다.

네트워크 이미지

인터넷에서 가장 자주 사용하는 이미지 형식은 비트맵,svg, 웹p를 포함한다.

비트맵

비트맵 이미지는 픽셀이라는 작은 점으로 구성됩니다.각 픽셀은 특정 색상을 지정하고 이미지를 형성하는 패턴으로 정렬된 사각형입니다.비트맵을 확대할 때 각 픽셀을 볼 수 있습니다.JPEG, PNG 및 GIF 등의 이미지 형식은 비트맵입니다.비트맵 형식은 사진과 같은 고도의 상세한 이미지에 적용된다.

WebP

WebP는 구글이 만든 고성능 이미지 형식으로 비트맵을 대체하기 위한 것이다.

SVG

축소 가능한 벡터 그래픽 (svg) 은 벡터 이미지 형식으로 수학 공식에 따라 만들어집니다. 렌더링 장치에서 계산할 수 있는 그리기 방법에 대한 정보는 첨부되지 않습니다.SVG는 비트맵보다 가벼워서 아이콘, 아트웍 등 확대/축소된 선명한 이미지를 만드는 데 사용됩니다.

SVG 구문

SVG는 XML(태그 언어)로 정의됩니다.

다음 그림은 원본 코드의 SVG 예를 보여줍니다.

정의를 분석해 봅시다. 💡SVG usually consists of a variety of elements e.g. <path>, </style>,<circle> etc. nested inside an svg element. The inner elements enclosed inside the svg tags are used to describe specific properties of the SVG whereas the outer svg element which is normally referred to as the root element basically instantiate and terminate an instance of SVG.The root element may contain attributes like viewBox, class, id, fill, height, width and xmlns. The id and class attributes are usually used to extend functionality in Javascript or to style the svg element. The id attribute may also be used in XML specific configurations like the setting up of links. The xmlns attribute is a XML namespace, it is used by the browser to determine how to render the SVG.

Vuejs에서 SVG 사용

일반적으로 SVG는 HTML 문서에 병합할 수 있습니다.

직렬 또는

외부 독립 파일입니다.

위에 나열된 메서드는 Vuejs에서 사용할 수 있습니다.

그러나 SVG를 Vuejs 웹 응용 프로그램에 통합하는 방법을 모색하기 전에우선, Vuejs에 SVG를 삽입하는 방법을 보여 주는 간단한 Vuejs 프로그램을 만듭니다.
Vue CLI를 사용하여 프로젝트를 안내합니다.
요구 사항:

Nodejs

Vue CLI

Vuejs 프로젝트를 만들려면 다음과 같이 하십시오.

터미널 유형:

vue create <project-name>

항목의 고유한 이름으로 바꾸기<project-name>.제 프로젝트는namesvg-tutorial입니다.

그런 다음 응용 프로그램에 대한 사전 설정을 선택하라는 메시지가 표시됩니다. Enter 키를 눌러 본 문서의 기본 사전 설정을 선택하십시오.Default ([Vue 2] babel, eslint).

그런 다음 Vue CLI에서 Vuejs 프로젝트를 생성할 때까지 기다립니다.

프로젝트가 성공적으로 만들어졌을 때🎉, 터미널에서 다음 메시지가 표시됩니다.

이 메시지는 편리한 명령을 포함하고 있습니다. 시작하세요!

프로젝트의 파일 구조를 살펴보겠습니다. 특히 src 폴더는 SVG와 관련된 대부분의 작업이 이 폴더에 한정되기 때문입니다.

.
├── babel.config.js
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    └── main.js

• I have created a sample SVG to use in the interactive examples provided.. You may go ahead and download it by clicking this link.

You may choose to rename the file, then proceed to add it to the root of the src/assets folder, such that the structure of the src folder is similar to the one below:

.
├── App.vue
├── assets
│   ├── logo.png
│   └── sample.svg
├── components
│   └── HelloWorld.vue
└── main.js

인라인 SVG

When using this method you include the svg directly in your markup. It's important to mention that when the svg is directly embedded in the document or template as in the case of Vuejs ,there is no need to include the xlmns attribute.

The pros of using this method are that you can use CSS to style your svg and use Javascript to extend its functionality just as you would a normal HTML element.

The main drawback of this method is that if your svg is large or when you have a lot of svg your template, your template becomes cluttered. In that case it would be better incorporate SVGs as standalone files as it is explained in the next section.

외부 SVG

To embed an external SVG in your Vuejs template you use the methods listed below and always ensure that the xlmns attribute is included in the root element of the SVG otherwise none of the methods provided will work!