HTML Svg ViewBox Attribute - Dofactory

Trang chủ » Html Scale Svg Element » HTML Svg ViewBox Attribute - Dofactory

Có thể bạn quan tâm

  • SQL SQL Tutorial SQL Reference Connection Strings
  • .NET C# Design Patterns C# Coding Standards C# Code Examples Visual Studio Shortcut Keys
  • HTML HTML Tutorial HTML Reference
  • CSS CSS Tutorial CSS Reference
  • JavaScript JavaScript Tutorial JavaScript Design Patterns
  • SQL
  • .NET
  • HTML
  • CSS
  • JavaScript
Select tutorial
Sql Tutorial Sql Reference Connection Strings
Select tutorial
C# Design Patterns C# Coding Standards C# Code Examples Visual Studio Shortcut Keys
Select tutorial
HTML Tutorial HTML Reference
Select tutorial
CSS Tutorial CSS Reference
Select tutorial
JavaScript Tutorial JavaScript Design Patterns HTML Reference HTML Reference HTML Tags HTML Tag Groups HTML Attributes HTTP Media Types HTTP Methods HTTP Status Codes HTML Country Codes HTML Language Codes HTML Event Attributes HTML Editor HTML Tags HMTL <a> HTML <abbr> HTML <address> HTML <area> HTML <article> HTML <aside> HTML <audio> HTML <b> HTML <base> HTML <blockquote> HTML <body> HTML <br> HTML <button> HTML <canvas> HTML <caption> HTML <cite> HTML <code> HTML <col> HTML <colgroup> HTML <data> HTML <datalist> HTML <dd> HTML <del> HTML <details> HTML <div> HTML <dl> HTML <dt> HTML <em> HTML <embed> HTML <fieldset> HTML <figcaption> HTML <figure> HTML <footer> HTML <form> HTML <h1> to <h6> HTML <head> HTML <header> HTML <hr> HTML <html> HTML <i> HTML <iframe> HTML <img> HTML <input> HTML <ins> HTML <kbd> HTML <label> HTML <legend> HTML <li> HTML <link> HTML <main> HTML <map> HTML <mark> HTML <meta> HTML <meter> HTML <nav> HTML <noscript> HTML <object> HTML <ol> HTML <optgroup> HTML <option> HTML <output> HTML <p> HTML <param> HTML <picture> HTML <pre> HTML <progress> HTML <q> HTML <rp> HTML <rt> HTML <ruby> HTML <samp> HTML <script> HTML <section> HTML <select> HTML <small> HTML <source> HTML <span> HTML <strong> HTML <style> HTML <sub> HTML <summary> HTML <sup> HTML <svg> HTML <table> HTML <tbody> HTML <td> HTML <template> HTML <textarea> HTML <tfoot> HTML <th> HTML <thead> HTML <time> HTML <title> HTML <tr> HTML <track> HTML <u> HTML <ul> HTML <var> HTML <video> HTML <wbr> HTML comment HTML <!DOCTYPE> Deprecated Deprecated Tags Deprecated Attributes Back to HTML Select Tutorial
  • HTML Tutorial
  • HTML Reference
  • CSS Tutorial
  • CSS Reference
  • SQL Tutorial
  • SQL Reference
  • JavaScript Tutorial
  • JavaScript Patterns
  • C# Design Patterns
  • C# Coding Standards
  • Connection Strings
  • Visual Studio Shortcuts
Earn income with your HTML skills Sign up and we'll send you the best freelance opportunities straight to your inbox. We're building the largest freelancing marketplace for people like you. Send Me Opportunities By adding your name & email you agree to our terms, privacy and cookie policies. HTML <svg> viewBox Attribute HTML <sup> HTML <table>

The viewBox attribute on an <svg> tag specifies the position and size of the svg image.

This is used to scale SVG element.

Example

#

A viewBox attribute on an <svg>. The coordinate system is in 0-100 units whereas the real dimensions are 200 x 200 pixels.

<svg viewBox="0 0 100 100" width="200" height="200"> <g transform="translate(50,50)"> <path d="M38,-1h12v2h-12zM-38-1h-12v2h12z"/> <path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(30)"/> <path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(60)"/> <path d="M38,-1h12v2h-12zM-38-1h-12v2h12z" transform="rotate(90)"/> <path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(120)"/> <path d="M40,-1h8v2h-8zM-40-1h-8v2h8z" transform="rotate(150)"/> <path d="M-0.5,0v-35h1v35z"/> <path d="M0,-0.75h30v1.5h-30z"/> <path d="M0,-0.75h30v1.5h-30z" transform="rotate(-30)" fill="#888"/> <circle r="2"/> </g> </svg> Try it live

Using viewBox

#

The viewBox is an attribute of the SVG element in HTML.

This attribute is used to scale the SVG element.

The SVG coordinates with origin, width, and height are defined with this attribute.

Syntax

#

<svg viewBox = "min-x min-y width height">

Values

#

Value Description
min-x Defines the origin on the horizontal axis (i.e left to right).
max-x Defines the origin on the vertical axis (i.e top to bottom).
width Defines the width of the viewbox.
height Defines the height of the viewbox.

Browser support

#

Here is when viewBox support started for each browser:

Chrome 4.0 Jan 2010
Firefox 3.0 Jun 2008
IE/Edge 9.0 Mar 2011
Opera 10.1 Jun 2010
Safari 3.2 Nov 2008

You may also like

#

  • Our HTML svg Tag Referencee
  • Our HTML canvas Tag Reference
  • Our CSS Images Tutorial

Back to <svg> Jack Poorte Jack Poorte Last updated on Sep 30, 2023 Earn income with your HTML skills Sign up and we'll send you the best freelance opportunities straight to your inbox. We're building the largest freelancing marketplace for people like you. Send Me Opportunities By adding your name & email you agree to our terms, privacy and cookie policies. Guides
  • HTML Tables
  • HTML Images
  • HTML Color Names
  • HTML Links
  • HTML Tags
  • HTML Lists
  • HTML Forms
  • HTML Buttons
  • HTML Spaces
  • HTML Checkboxes
  • HTML Editors
  • HTML Comments
On this page
  • viewBox Attribute
  • Example
  • Using viewBox
  • Syntax
  • Values
  • More Examples
  • Browser support
  • You may also like

Từ khóa » Html Scale Svg Element