아이콘은 아마도 SVG 파일이어야 합니다. 이유는 다음과 같습니다.

4492 단어 beginnershtmlcsstutorial
이 내용을 읽은 후에는 아이콘에 .PNG 파일을 다시는 사용할 수 없습니다.
먼저 첫 번째 것들.

.SVG 파일이란 무엇입니까?



SVG(Scalable Vector Graphic)는 널리 사용되는 웹 친화적인 파일 형식입니다.

PNG 또는 JPG에 비해 SVG 파일의 장점:

픽셀로 구성된 래스터 파일(예: JPG 및 PNG)과 달리 SVG와 같은 벡터 그래픽은 크기에 관계없이 항상 해상도를 유지합니다. 더 이상 흐릿한 아이콘이 없습니다! SVG가 특정 브라우저에서 시각적 품질을 잃거나 다른 위치에 표시되도록 크기를 조정할 때 걱정할 필요가 없습니다.

기본 SVG 파일은 수학적 알고리즘과 달리 수많은 픽셀로 구성된 PNG 또는 JPG보다 파일 크기가 작은 경우가 많습니다.

SVG 파일은 텍스트를 텍스트로 취급하기 때문에 스크린 리더는 SVG 이미지에 포함된 모든 단어를 스캔할 수 있습니다. 따라서 귀하의 웹사이트는 웹페이지를 읽는 데 도움이 필요한 사람들에게 더 접근하기 쉽고 유용합니다. 검색 엔진은 SVG 이미지 텍스트를 읽고 인덱싱할 수도 있습니다.

자세한 내용을 알아보려면 Adobe의 SVG 심층 분석here을 참조하십시오.

이제 재미있는 부분입니다. 프로젝트에 SVG를 추가합니다.

웹사이트에 SVG를 추가하는 방법:



SVG를 HTML 파일에 직접 삽입하고 CSS로 쉽게 조정할 수 있습니다.

단계별로 분석해 보겠습니다.

1단계: SVG 파일 만들기 또는 SVG 파일 찾기:
SVG를 만들 때 Adobe Illustrator와 같은 벡터 그래픽 편집기를 사용하는 것이 가장 좋습니다. 디자이너가 아닙니다. 걱정할 것 없습니다. The Noun Project 또는 Icons8과 같은 사이트에서 무료 SVG를 찾거나 SVG를 구입할 수 있습니다.

Adobe Illustrator를 통해 이 예제 SVG를 저장하고 있습니다.



2단계: SVG 코드 가져오기:
SVG 파일의 코드를 얻는 가장 쉬운 방법은 파일을 마우스 오른쪽 버튼으로 클릭하고 TextEdit과 같은 간단한 텍스트 편집기에서 여는 것입니다. 또한 속성 id를 내 svg 태그 내부의 "icon"으로 변경할 예정이지만 원하는 이름을 자유롭게 지정할 수 있습니다. <svg id=”icon”… ></svg> 이제 SVG 열기 태그에서 시작하여 닫기 태그<svg id=”icon”…. ></svg>까지 모든 텍스트를 선택하고 복사합니다(Mac에서는 CMD + C, Windows에서는 CTRL + C).





3단계: 프로젝트에 SVG 코드 추가:
몇 가지 방법이 있습니다. 따라서 html 파일의 본문에 요소를 추가하는 데 선호하는 방법이 있는 경우 여기에서 스크립트를 벗어나도 됩니다. 특히 특정<div> 안에 SVG를 배치하려는 경우.

그러나 단순화를 위해 SVG 코드를 html 파일의 본문 태그(<body> (paste here) </body>)에 직접 붙여넣겠습니다(Mac에서는 CMD + V, Windows에서는 CTRL + V).

<body id="body">
  <svg id="icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path

d="M12,.92A11.08,11.08,0,1,0,23.08,12,11.08,11.08,0,0,0,12,.92Zm5.52,15.191.41,1.41L12,13.41,7.89,17.52,6.48,16.11,10.59,12,6.48,7.89,7.89,6.48,12,10.59l4.11-4.11,1.41,1.41L13.41,12Z" />
  </svg>
</body>



이것은 html 파일을 미리 볼 때 볼 수 있는 것입니다.




4단계: SVG 코드 스타일 지정:
원하는 방식으로 SVG 스타일을 지정할 수 있습니다. 귀하의 공상에 맞는 색상, 크기, 속성 등을 선택하십시오. SVG의 크기를 5em으로 변경하겠습니다. (예, 너무 크다는 것을 압니다. 무시하세요... 스크린샷 가시성을 위한 것입니다.)

CSS 파일에서 html 파일의 SVG 코드에서 id="icon"을 참조하는 '#icon'을 입력하고 중괄호 안에 'width: 5em;'을 입력합니다. 또는 아이콘의 너비를 원하는 대로 지정할 수 있습니다.

#icon {
  width: 5em;
}



이것은 html 파일을 미리 볼 때 볼 수 있는 것입니다.


프로젝트의 CSS 파일에서 SVG의 채우기 색상을 파란색으로 변경하겠습니다.

#icon {
  width: 5em;
  fill: blue;
}



다시 말하지만 이것은 html 파일을 미리 볼 때 볼 수 있는 것입니다.


그리고 거기 당신은 그것을 가지고 있습니다. 쉬운 완두콩 레몬 squeezy.

CSS를 사용하여 SVG 파일에 호버 효과 또는 애니메이션을 추가하는 것도 매우 간단합니다. 디자인하고, 실험하고, 반복하십시오.

이 기사가 마음에 들면 좋아요, 공유 또는 댓글을 남겨주세요.
읽어 주셔서 감사합니다.
tfcmt는 주석 업데이트를 지원합니다.
heroku가 sleep 상태에 들어가 버려 응답이 느린 문제를 newRelic로 ping을 보내는 것으로 해결

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage