SVG가 쉬워졌어요.

6402 단어 webdevcssjavascript
SVG가 없는 곳이 없습니다.거의 모든 사이트에 SVG 이미지가 포함되어 있어 그 인기가 계속 증가하고 있다.
본고는 SVG의 신비한 베일을 벗기고 SVG와 관련된 일부 개념상의 공백을 메우고 마지막으로 SVG를 배경으로 웹 페이지를 만들어 실천하고자 한다.

만족하다

  • SVG 이미지
  • SVG를 사용하는 이유
  • 뷰포트 및 뷰포트 상자
  • 3D 뷰어 장난감 종류비
  • 웹 페이지에 SVG 배경 추가
  • SVG의 유용한 리소스

    • SVG 이미지


    SVG는 축척 벡터 그래픽을 나타냅니다.이것은 수학 공식을 사용하여 계산한 이미지 형식이다.장점은 해상도를 잃지 않고 확장할 수 있다는 것이다.
    SVG 이미지를 만들려면 태그를 사용하여 이미지의 모양을 설명합니다.

    왜 SVG야?


    SVG를 원하는 이유는 다양합니다.명백히 알 수 있는 것은 그것이 품질을 손상시키지 않는 상황에서 확장될 수 있다는 것이다.그림의 선명도는 변하지 않는다.
    바로 다음 점을 끌어냈다.
    당신은 곡선 모양의 배경이 있는 사이트를 방문한 적이 있습니까?개발자가 png,jpg 또는 다른 이미지 형식을 사용할 것이라고 생각합니까?왜 안 해요?
    SVG는 수학 공식을 사용하여 모양을 그립니다.따라서 파일 크기는 다른 이미지 형식에 비해 상대적으로 작습니다.
    SVG의 크기와 위치가 어떻게 변경되는지에 대한 자세한 내용은 논의에 앞서 살펴보겠습니다.이것이 바로 Viewport과viewBox가 작용하는 곳이다.

    뷰포트 및 뷰포트 상자


    뷰포트는 SVG 이미지의 표시된 부분을 정의합니다.그것을 창틀로 상상하다.이를 그림의 이미지 내용으로 오해해서는 안 된다.일반적으로 태그의 너비와 높이 속성으로 정의됩니다.
    만약 네가 아직 이해하지 못한다면 걱정하지 마라.다음 절의 유비는 이 점을 설명할 것이다.
    ViewBox는 뷰포트로 간주됩니다.그것은 감지 단원의 수량을 포지셔닝하고 설명하는 능력을 제공했다.뷰포트에 비해 값이 필요한 속성입니다:min-x,min-y,width,height.x 및 y가 뷰포트 위치를 이동합니다.확대 및 축소의 너비와 높이
    태그의 viewBox 속성 예:
    <svg viewBox="0 0 100 100">

    3D 뷰어 장난감 비교



    당신은 어린 시절의 3d 뷰어를 기억합니까?네가 보고 싶은 곳에서, 너는 너의 눈을 이 두 개의 보기를 쳐다보고 3d 이미지를 볼 수 있니?때때로 너는 손잡이를 당겨서 그림을 전환할 수 있다.
    네가 손잡이를 당겨 그림을 바꾸면 그림의 위치를 이동할 수 있을 것 같아.이것이 바로 네가 다른 그림을 볼 수 있는 방식이다.viewBox의 경우 min-x와min-y의 값은 SVG 이미지에서 정의된 모양 사이를 이동할 때 변경된 것입니다.
    3d 뷰어의 또 다른 구성 요소는 그림 사이를 가깝게 하거나 멀리 이동하는 데 사용되는 원형 롤러입니다.그래서viewBox에 대해 이야기할 때, 나는 그것을 확대하고 축소할 수 있는 너비와 높이 값을 가리킨다.
    만약 네가 이 두 렌즈를 고려한다면, 3d 뷰어의 경우, 너는 이 두 렌즈를 통해 볼 것이다.viewBox는 자체 뷰포트를 가지고 있으며, 탭의 너비와 높이를 사용하여 SVG 이미지에 대한 뷰포트를 정의합니다.

    웹 페이지에 SVG 배경 추가


    이제 독특한 배경을 만드는 즐거움을 누릴 준비를 하세요.이 예제에서는 두 개의 SVG 이미지를 포함하는 배경을 만듭니다.이 그림들은 blobapp에서 생성하고 다운로드할 수 있습니다.일반 도메인 이름 형식.

    1단계:HTML 파일 만들기


    색인을 만듭니다.html 파일.그 안에 아래의 HTML5 코드를 추가합니다.VScode를 사용하는 경우 html:5를 입력하여 코드 세그먼트를 추가할 수 있습니다.
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG blob example</title>
</head>
<body>

</body>
</html>

    2단계: SVG 이미지에 두 개의 div 추가


    바디 태그에 다음 클래스를 가진div 두 개를 추가합니다.bg blob 클래스 선택기는 모바일 DIV 스타일을 상속합니다.다른 클래스는 스펙클 이미지의 정확한 위치를 지정합니다.
    <body>
    <div class="bg-blob bg-medium-blob"></div>    
    <div class="bg-blob bg-large-blob"></div>    
</body>

    3단계:blob 이미지 다운로드 및 저장


    반점.프로그램에서 원하는 무작위 얼룩 그림을 만들어서 색인이 있는 로컬 디렉터리에 저장합니다.html 주재.

    4단계: CSS 스타일 추가


    우선 당신의 몸에 배경색을 더해 더욱 매력적으로 만들어 보세요.
    body {
    background-color: #e2e8f0;
}
    다음에 DIV를 이동할 수 있도록 위치를 절대적으로 설정하는 bg blob 클래스를 추가합니다.그것의 z-인덱스도 -1입니다. 그러면 다른 내용이 우리의 그림 위에 나타날 것입니다.
    .bg-blob {
    position: absolute;
     z-index: -1;
     box-sizing: content-box;
     height: 0;
     padding: 0;
     background-size: cover;
     background-repeat: no-repeat;
}
    SVG 이미지를 배경으로 사용하려면 DIV 컨텐트가 HTML 문서 흐름의 일부로 간주되지 않도록 채우는 해킹 방법이 필요합니다.따라서 직사각형의 크기와 높이를 0으로 설정합니다.
    다음에 blob 이미지의 위치로 아래 CSS 스타일을 추가합니다.
    .bg-large-blob {
    top: 0;
    left: 0;
    width: 70%;
    padding-bottom: 70%;
    background-image: url(./large-blob.svg);
}
    폭과 하단 채우기를 사용하여 SVG가 화면에 표시되는 크기를 결정합니다.그리고 사용자의 취향에 따라 top, left, right를 사용하여 SVG를 지정합니다.마지막으로 SVG 파일을 배경 이미지로 가져옵니다.

    5단계: SVG 이미지 편집


    대부분의 경우 얼룩으로 아름다운 배경을 만들기 위해 우리는 모양을 약간 재단하는 경향이 있다.viewBox의mix-x와mix-y 값만 사용하면 우리는 이런 행위를 실현할 수 있다.
    블로그 이미지에 대해 웹 페이지에서 왼쪽과 아래로 모양을 이동할 수 있도록viewBox를 설정합니다.viewBox의 첫 번째 값 150은 이미지를 왼쪽으로 150단위 이동합니다.한 단위가 px라는 것을 감안하면두 번째 값인 200도 마찬가지다.
    <svg viewBox="150 200 500 500" width="500" xmlns="http://www.w3.org/2000/svg" id="blobSvg">
    <path id="blob"  d="M482,295.5Q471,341,405.5,340.5Q340,340,330.5,381Q321,422,285.5,449.5Q250,477,222,431.5Q194,386,144,396Q94,406,69.5,370.5Q45,335,48,292.5Q51,250,40.5,204.5Q30,159,92.5,157Q155,155,161,102Q167,49,208.5,55Q250,61,293,52Q336,43,369.5,70Q403,97,394,145.5Q385,194,439,222Q493,250,482,295.5Z" fill="#7fd1ae"></path>
</svg>
    SVG는 다음과 같아야 합니다.

    SVG의 유용한 리소스

  • Blob Maker 및 Blobs-SVG 생성기 물방울 모양 만들기
  • Get Waves - 파형을 생성하는 SVG 생성기

  • Scaling SVG Elements - viewBox가 어떻게 작동하는지에 대한 상호작용 프레젠테이션
    • myGitHub repository의 원본 코드를 보고 싶으면 여기result입니다.
    다음은 내가 SVG를 사용하여 File Simulator 프로젝트를 만든 배경의 또 다른 예이다.

    나는 지금까지 네가 너의 다음 프로젝트 배경을 유일무이하게 하지 않을 이유가 없기를 바란다.만약 당신이 읽은 내용을 좋아한다면, 나를 따라 비슷한 힌트와 기교를 더 많이 이해하세요.
    VCD가 못하는 것 중 하나인 유닛 기본편.
    Dockerfile 설명 및springboot 구축 실전

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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