위 페이지는 주로 정규 XHTML, CSS, JavaScript입니다. 다만 흥미로운 부분은 위 페이지에 포함되어 있는 태그에 invalid속성을 설정하고 스타일 규칙은 색변화도의 end-stop색을 빨간색으로 변경합니다. (나머지 스타일 규칙에 따라 에러 메시지가 출력됩니다.)\n

이 방식은 수고면에서 다음과 같은 특징을 가집니다:\n

\n
• 우리는 기존의 웹사이트들에서 이전부터 사용되어온 정규 XHTML의 form을 사용했으며 여기에 매력적이고 인터랙티브한 배경그림까지도 추가했습니다.\n
• 이 방식은 SVG를 지원하지 않는 웹브라우져와 하위 호완성을 가집니다; 단순히 이들 웹브라우져에서는 배경그림만 없을 뿐입니다.\n
• 단순한 방식이며 아주 잘 동작합니다.\n
• 그림은 동적으로 필요한 크기에 따라 영리하게 스스로 크기를 변경합니다.\n
• HTML과 SVG 모두에게 적용될 수 있는 선언적 스타일 규칙들을 가질 수 있습니다.\n
• 같은 스크립트가 HTML과 SVG 모두를 조작할 수 있습니다.\n
• 문서는 완전히 표준에 기반하고 있습니다.\n"}},{"type":"prose","value":{"id":"details","title":"Details","isH3":true,"content":"

  viewBox속성은 SVG 그림의 좌표계에 상대적인 논리적 좌표계를 생성합니다. 이 경우 그림은 100x100크기의 뷰포트에 놓여집니다.\n

  preserveAspectRatio속성은 주어진 크기내에 그림을 넣을때 그림의 높이나 폭을 최대로 해서 주어진 크기에 맞게 그림을 맞추고 넘어가는 부분들을 잘라냄으로써 그림의 비율이 보존되도록 지정합니다.\n

  style속성은 SVG 원소를 form의 배경에 고정시킵니다."}},{"type":"prose","value":{"id":"related_links","title":"Related Links","isH3":true,"content":"

  \n
  • Another SVG in XHTML example: A swarm of motes\n
  • Inline SVG page on SVG wiki\n"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"ko","mdn_url":"/ko/docs/Web/SVG/Guides/SVG_in_HTML","modified":"2025-05-07T15:05:05.000Z","native":"한국어","noIndexing":false,"other_translations":[{"locale":"en-US","title":"SVG in HTML introduction","native":"English (US)"},{"locale":"de","title":"Einführung in SVG in HTML","native":"Deutsch"},{"locale":"fr","title":"Introduction à SVG dans HTML","native":"Français"},{"locale":"ja","title":"HTML 内の SVG 入門","native":"日本語"},{"locale":"ru","title":"SVG в HTML. Введение","native":"Русский"},{"locale":"zh-CN","title":"SVG In HTML Introduction","native":"中文 (简体)"}],"pageTitle":"SVG In HTML Introduction - SVG: Scalable Vector Graphics | MDN","parents":[{"uri":"/ko/docs/Web","title":"개발자를 위한 웹 기술"},{"uri":"/ko/docs/Web/SVG","title":"SVG: Scalable Vector Graphics"},{"uri":"/en-US/docs/Web/SVG/Guides","title":"Guides"},{"uri":"/ko/docs/Web/SVG/Guides/SVG_in_HTML","title":"SVG In HTML Introduction"}],"popularity":null,"short_title":"SVG In HTML Introduction","sidebarHTML":"
    1. SVG: Scalable Vector Graphics
    2. 자습서:
    3. Introducing SVG from scratch

       1. 소개
       2. 시작하기
       3. 위치
       4. 기본 도형
       5. 패스
       6. Fills and strokes
       7. Gradients in SVG
       8. 패턴
       9. Texts
       10. Basic transformations
       11. Clipping and masking
       12. Other content in SVG
       13. Filter effects
       14. Using fonts in SVG
       15. SVG 이미지 요소
       16. Tools for SVG
       17. SVG와 CSS
       18. 안내서:
       19. 1. Content type
           2. Linking
           3. Namespaces crash course
           4. Scripting
           5. SVG animation with SMIL
           6. SVG as an image
           7. SVG effects for HTML
           8. SVG filters
           9. SVG In HTML Introduction
           10. 참고서:
           11. 요소