SVG파일 알아보기

SVG 형식의 파일 : 파일은 무엇이며 어떻게 작동합니까?

많은 벡터 리소스는 SVG 파일 형식이라는 특별한 유형의 파일로 제공됩니다. 많은 디자이너는 이미이 개념을 잘 알고 있으며이 형식으로 작업하는 데 익숙합니다. 그러나 벡터의 세계 (또는 우주)를 시작하면서이 파일 확장자에 익숙하지 않은 경우 오늘에 대한 자세한 비트 : SVG 형식은 무엇인가? 그리고 우리는 어떻게 그것으로 작업합니까?

거의 모든 사람들이 가장 일반적인 이미지 파일 유형에 익숙합니다. JPG, PNG 및 GIF가 가장 보편적입니다. 그러나 SVG는 벡터 형식이므로 일부 특수 기능을 사용할 수 있습니다. 다른 벡터 이미지 유형과 마찬가지로 정보는 픽셀 단위로 저장되지 않지만 훨씬 가볍고 최상의 통화 품질을 제공하는 다른 종류의 데이터로 모든 크기에서 확장 가능합니다.

Files in the SVG format: what are they and how do they work?

As you know, many of the vector resources that you can download from Freepik come in a special type of file, called the SVG file format. Many designers are already familiar with this concept and they are used to working in this format, but if you are getting started in the world (or rather, universe) of vectors and you are not familiar with this file extension, we’ll learn a bit more about it today: what is the SVG format? And how do we work with it?

Almost everyone is familiar with the most common image file types: JPG, PNG and GIF are the most common. But SVG is a vector format, which allows for some special features. As with any vector image type, the information isn’t stored in terms of pixels, but as other kind of data that is much more lightweight and the best of call: scalable at any size!

웹 디자인

Flash와 같은 SVG 형식은 개방적이고 표준화 된 XML 기반이며 모든 브라우저와 완벽한 호환성을 제공합니다. 이것은 웹 디자인에서 특별한 종류의 이미지, 즉 벡터 이미지로 사용될 수 있음을 의미합니다. 우리는 픽셀 시대에 살고 있지만 천천히 SVG 형식이 웹 디자인에서 그들의 위치를 ​​주장하기 시작했습니다. 벡터는 항상 어떤 해상도에서도 선명하게 보입니다. 실제로 SVG (Scalable Vector Graphics)는 파일 크기가 작을 수 있기 때문에 윈윈 (win-win) 상황입니다.

색상 및 애니메이션

웹 디자인에서 SVG 형식을 사용하는 멋진 점 중 하나는 스타일 시트를 사용하면 이러한 벡터에 대한 사항을 수정할 수 있다는 것입니다. 예를 들어 SVG 아이콘이 녹색이지만 웹 디자인에서 SVG 아이콘을 검은 색으로 만들려면 색상을 변경하기 위해 몇 줄의 코드 만 추가하면 됩니다 . Flaticon에서 찾을 수 있는 아이콘과 같이 단순한 디자인으로 작업하는 경우이 기능이 유용합니다. 또한 색상을 변경할 수 있을뿐만 아니라 SVG도 CSS로 애니메이션을 적용 할 수 있습니다. SVG 요소 위에 마우스를 가져 가면 SVG 요소가 깜박 거리고 싶다면 몇줄만 사용해도 됩니다. 

Web design

The SVG format, like Flash, is open, standardized and XML-based, which allows for total compatibility with all browsers. This means it can be used in web design as an special kind of image: the vector image. We live in the pixel age, but slowly SVG formats have begun to claim their place in web design. Vectors always look crisp at any resolution, and considering that SVG (which actually stands for Scalable Vector Graphics) can have small file sizes, this is a win-win situation.

Color and animation

One of the cool things about using the SVG format in web design, is that with style sheets you can modify things about these vectors. For example, if a SVG icon is green but you want it to be black in the web design, you only have to add a few lines of code to change the color. This is great if you are working with simpler designs, like the icons that you can find on Flaticon. And not only you can change the colors, but SVG can be animated with CSS, too: if you want a SVG element to blink when you hover your mouse over it, it can be done with just some lines! 

반응 형 아이콘 

창의 크기를 조정하면 창의 크기가 커질수록 콘텐츠의 가시성이 향상됩니다. 이는 응답 성있는 요소 덕분에 가능합니다. 그러나 크기가 다른 서버에 여러 이미지가있는 대신 SVG 아이콘은 자동으로 창 크기 에 맞게 자동으로 확장됩니다 . 또는 다양한 상징성을 가진 아이콘을 가질 수 있지만 SVG 형식으로 항상 최상의 상태로 볼 수 있습니다!

SVG를 사용하는 대신 글꼴이 그러 하듯이 "문자"아이콘이있는 글꼴 인 아이콘 글꼴을 사용할 수도 있습니다. 그러나 이미 알고 있듯이 SVG를 사용하면 요소의 색상을 변경하거나 애니메이션을 적용하는 것과 같은 멋진 장점이 있습니다. 

몇 가지 단점은?

일부 브라우저에서는 SVG 아이콘이 작동하지 않을 수 있으며 공백이나 사용자 경험 문제를 피하기 위해 SVG를 표시 할 수없는 경우 폴백 (fallback)으로 JPEG 또는 PNG 추가 파일 을 만들어야 합니다. 이는 추가 작업을 의미하지만 벡터의 이점을 고려하면 실제로 가치가 있습니다!

Responsive icons 

It’s great when you resize your windows and the elements in it adapt to the new size, allowing you to still have good visibility of the content, right? This can be achieved thanks to responsive elements. But instead of having several images in the servers in different sizes, SVG icons can automatically scale themselves to fit your windows best. Or you can have icons with varying degrees of iconicity, but in SVG format so that they always look their best!

The alternative to using SVG can sometimes be using an icon font, which is a font where the “letters” are icons, which scalate and transform just like a font would. But using SVG, as we already know, has some cool advantages, like being able to change colors of elements or animating them. 

Some disadvantages?

SVG icons might not work in some browsers, and to avoid blank spaces or user experience problems you will have to create JPEG or PNG extra files as fallbacks in case that the SVG can’t be displayed. This means extra work, but taking into account the advantages of vectors, it can really be worth it!