저는 HTML에 관한 Bytes #293의 주요 내용에 동기를 부여받았습니다. 이들의 동기는 State of HTML 2023 설문조사(및 자금... 단, 후원 섹션은 메일 발송에서 제외)에서 나왔습니다.
이 내용에 전혀 익숙하지 않다면 시작을 위한 여러 링크를 통해 제가 도움을 드릴 수 있습니다. 그 후에는 아무 것도 변하지 않지만 svg에 대해 더 많은 것을 알게 될 것입니다
̅_(ツ)_/́
틀;DR
SVG 요소는 벡터 그래픽 요소입니다. 이는 문자로 표현된 기하학적 도형의 묶음으로 이해될 수 있습니다. 예를 들어 Adobe Illustrator 또는 Inkscape를 사용하여 무료 대안으로 만들 수 있습니다.
사람들의 답변에서 몇 가지 패턴을 볼 수 있습니다. 특정 주제를 선택하지는 않지만 해당 주제와 관련된 몇 가지 지식을 공유하려고 노력할 것입니다. 따라서 이 주제와 관련된 몇 가지 팁과 요령, 경험 공유 및 기타 공통 지식을 여기에서 찾을 수 있습니다.
이 예와 같은 SVG 스프라이트 주제는 건너뛰겠습니다. 별도의 주제이며 svg 태그와 별로 연결되어 있지 않습니다. 여전히 몇 가지 드문 사용 사례를 찾을 수 있다는 데 동의합니다.
적절한 SVG 파일은 언급된 기하학적 도형을 표현해야 합니다. 아이콘을 사용하는 디자이너나 웹사이트에서 아이콘이 올바른 형식으로 준비되었는지 확인하는 것은 매우 쉽습니다.
잘못된 예:
<svg ...><image link:href="data:image/png;base64 .../>
예상 구문:
<svg><g><path r=""/><circle /></g></svg>
저는 경력을 쌓는 동안 이런 일을 몇 번 겪었습니다. 그것을 기억할 가치가 있습니다. 래스터 그래픽을 가져와 벡터 그래픽 프로그램으로 가져온 다음 .svg 확장자로 내보내려고 할 때 이런 일이 발생합니다. 이미지를 마술처럼 벡터 그래픽으로 변환하지 않습니다.
가장 일반적인 SVG 요소에 대한 치트 시트를 제시해 드릴 수 있습니다.
| Tag | Description | Animated attributes |
|---|---|---|
| used for grouping elements | - | |
| main tag for your actual icon. Avoid modifying the d="" attribute on your own ? It is possible but be careful with that. Grab a link with an explanation for each character group. To animate your path use animateMotion tag | - | |
| Basic rectangle shape in SVG. Simple as that | ✅ | |
| Simple as that. The line between two points. Don't mistake with the stroke attribute! It can also be used on the line tag. | ✅ | |
| You can think about it as an enhancement version of the g tag but it keeps the elements inside invisible for later use with, let's guess it... use tag | - | |
| Next basic shape. Be careful as the size is defined by radius and you position your circle with cx and cy attributes. | ✅ | |
| Let's call it a custom shape. They are connected straight lines where the last point connects to the first point. | ✅ | |
| Very similar to the previous one but with a notable difference. The last point doesn't need to be connected to the first point. | ✅ |
여기에는 일부 선택된 SVG 요소만 포함되어 있습니다. 나는 가장 일반적인 것들을 설명했습니다. 더 많은 것을 사용할 수 있습니다. 전체 목록은 여기에서 확인할 수 있습니다.
이제 몇 가지 일반적인 svg 태그에 익숙해졌으므로 아이콘의 기본 매개변수를 수정하는 다음 단락으로 넘어갈 수 있습니다.
젊은 디자이너와 함께 작업한다고 가정해 보겠습니다. 그/그녀는 아직 당신처럼 웹을 위한 준비 방법을 완전히 알지 못합니다. 결과적으로 측면에 컷 패딩이 누락되어 아이콘 크기가 약간 다른 경우가 있습니다.
| good one | wrong one |
|---|---|
 |
 |
클래식한 케이스. 디자이너와 빠르게 통화하여 이를 명확히 해야 한다는 것을 알고 있지만 여기서 svg를 좀 배우고 싶습니다. 이 시나리오에서는 그렇게 하지 않습니다. 저희가 직접 고칠 수 있습니다.
코드 관점에서 보면 모든 것은 속성에 관한 것입니다. 원본 SVG 크로스 파일은 다음과 같습니다.
<svg ...><image link:href="data:image/png;base64 .../>
결과:
거의 우리가 원하는 것! 첫 번째 아이콘과 같이 패딩을 보존할 수 있는 방법을 더 자세히 살펴보겠습니다.
두 가지 옵션이 있습니다. 동일한 viewBox 값을 유지하거나 모든 중첩 태그에서 너비, 높이, x 및 y 값을 각각 조정할 수 있습니다.
첫 번째 옵션은 간단해 보이고 우리에게는 꽤 효과적이지만 문제가 있을 수 있습니다. 제 경우에는 그룹 태그에 이런 이상한 변형 속성이 있었습니다.
<svg><g><path r=""/><circle /></g></svg>
이제 아이콘 크기를 조정할 수 있습니다. 벡터 그래픽이므로 크기 조정 후에도 아이콘 품질이 떨어지지 않습니다.
그렇다면 viewBox가 왜 그렇게 중요한가요?
아이콘의 특정 위치를 올바르게 조정하거나 설정하려는 경우 이것이 핵심입니다. 4개의 인수 viewBox="min-x min-y width height"가 있습니다.
예를 들어 viewBox="0 0 100 100"은 왼쪽 상단 모서리가 (0, 0)에 있고 viewBox의 너비가 100단위, 높이가 100단위임을 의미합니다.
즉, viewBox는 값에 따라 설정되므로 아이콘 x 및 y 속성을 변경한 후 조정해야 합니다.
아이콘에 따라 채우기가 달라집니다. 물론 색상 스타일을 추가하는 것만큼 쉬울 수도 있지만 초보 수준의 코드입니다.
실제 개발자는 기본 요소에 fill-rule="evenodd"를 추가하고 태그에서 다른 모든 수동 채우기 속성을 삭제하고 있나요?
이유가 궁금하실 수도 있습니다.
이에 대해서는 최대한 짧게 답변해 드리겠습니다. IDE에서 바로 한 줄의 코드로 아이콘 색상을 자유롭게 사용자 정의할 수 있습니다.
어떻게 그게 가능하냐고 물으실 수도 있겠네요.
회사 디자인 시스템의 간단한 아이콘을 다루는 경우 하나의 아이콘만 가져올 수 있어야 합니다. 크기나 색상의 수정이나 중복은 필요하지 않습니다.
코드 관점에서 보면 일반적으로 색상 속성 등을 사용하는 것처럼 svg 요소에 채우기를 추가하기만 하면 됩니다.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg width="93.582886" height="93.582893" viewBox="0 0 24.760471 24.760474" version="1.1" > <p>This is our raw svg exported from Inkscape. There are a few other things to fix, bear with me so we can fix them.</p> <p>We know that 200px image is our goal. Here we have some ugly width/height values on the main svg tag.</p> <p>Simply:<br> </p> <pre class="brush:php;toolbar:false"><svg - width="93.582886" + width="200" - height="93.582893" + height="200"
다각형이나 경로를 그릴 때 적용되는 짝수 값에 대한 주의 사항이 있습니다. 교차 경로 세그먼트 내부만 채웁니다.
문제가 발생할 경우를 대비해 이 예를 분석해 보세요.
따라서 십자가 아이콘의 경우 다음과 같은 결과가 나타납니다.
아이콘을 웹에 게시하기 전(또는 Figma에서 다운로드한 직후) 아이콘이 적절하게 최적화되었는지 확인해야 합니다. 이것은 매우 중요합니다. 나는 이 마지막 마일에 대한 코드 검토 중에 너무 많이 잡히거나 잡혔습니다.
SVGO(또는 반응의 경우 SVGR)를 사용하면 프로세스가 매우 쉬워집니다. 보이지 않는 곳에서는 불필요한 내용을 대부분 삭제합니다.
일반적으로 사용되는 도구입니다. 번들러와 통합하거나 CLI에서 사용하려고 합니다. 기본 사전 설정이 기본으로 구성되어 있으므로 설치 후 바로 사용할 수 있습니다.
참고: 정말로 원하는 경우 기본 사전 설정을 덮어쓸 수 있습니다. 프로젝트 README에서 구성을 확인하고 문서에서 플러그인 목록을 확인하세요
최종 아이콘 코드는 다음과 같습니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><g fill-rule="evenodd"><경로 d= "M9 24h32v3H9z">
<p>inkspace에서 내보낸 원시 아이콘을 사용하여 크기를 871바이트에서 322바이트로 줄였습니다.</p>
<h2>
애니메이션의 고통
</h2>
<p>나에게 씁쓸한 마지막 주제. 설문조사 답변에도 몇 번이나 포함되었습니다. Lottie를 사용하거나 CSS에서 SVG 요소에 수동으로 애니메이션을 적용하는 것 외에는 더 나은 방법을 모르겠습니다. 두 번째 옵션은 애니메이션할 요소가 5개 이상인 경우 절대적인 고문입니다.</p>
<p>물론 가능하고 할 수도 있지만 솔직히 재미있는 일이 더 많죠 ?</p>
<p>어떻게 해야 할지 아직도 궁금하다고 가정해 보세요. 여기에 좋은 글 링크를 남겨드립니다. 인내심이 필요하고 5분 이상 걸린다는 점을 확신시켜야 합니다. AI 봇이 도움을 줄 수 있을지 궁금합니다! 그렇다면 조금 덜 고통스러울 수도 있겠네요.</p>
<p>지금은 여기까지입니다.<br>
이 게시물을 참고하시고 좋은 하루 보내시기 바랍니다. </p>
위 내용은 당신을 위한 SVG 해킹의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
