{"id":137126,"date":"2024-10-14T13:09:21","date_gmt":"2024-10-14T07:39:21","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=137126"},"modified":"2024-10-16T15:56:52","modified_gmt":"2024-10-16T10:26:52","slug":"elements-and-attributes-of-svg-svg","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/elements-and-attributes-of-svg-svg\/","title":{"rendered":"Elements and Attributes of SVG | SVG"},"content":{"rendered":"\n<p>SVG (Scalable Vector Graphics) is a language for describing two-dimensional graphics. It consists of various elements that define shapes, paths, text, and other visual components.<\/p>\n\n\n\n<p><strong>Common SVG Elements<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>&lt;svg&gt;:<\/strong> The root element of an SVG image.<\/li>\n\n\n\n<li><strong>&lt;rect&gt;:<\/strong> Defines a rectangle.<\/li>\n\n\n\n<li><strong>&lt;circle&gt;:<\/strong> Defines a circle.<\/li>\n\n\n\n<li><strong>&lt;ellipse&gt;:<\/strong> Defines an ellipse.<\/li>\n\n\n\n<li><strong>&lt;line&gt;:<\/strong> Defines a line.<\/li>\n\n\n\n<li><strong>&lt;polyline&gt;:<\/strong> Defines a path consisting of straight lines.<\/li>\n\n\n\n<li><strong>&lt;polygon&gt;:<\/strong> Defines a closed path consisting of straight lines.<\/li>\n\n\n\n<li><strong>&lt;path&gt;:<\/strong> Defines a path consisting of curves and lines.<\/li>\n\n\n\n<li><strong>&lt;text&gt;:<\/strong> Defines text.<\/li>\n\n\n\n<li><strong>&lt;g&gt;:<\/strong> Defines a group of elements.<\/li>\n<\/ul>\n\n\n\n<p><strong>Attributes<\/strong><\/p>\n\n\n\n<p>SVG elements have various attributes that can be used to customize their appearance and behavior.<\/p>\n\n\n\n<p><strong>Common Attributes<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>id:<\/strong> Sets a unique identifier for the element.<\/li>\n\n\n\n<li><strong>class:<\/strong> Assigns the element to one or more classes for styling.<\/li>\n\n\n\n<li><strong>style:<\/strong> Sets inline styles for the element.<\/li>\n\n\n\n<li><strong>fill:<\/strong> Sets the fill color.<\/li>\n\n\n\n<li><strong>stroke:<\/strong> Sets the stroke color and width.<\/li>\n\n\n\n<li><strong>stroke-width:<\/strong> Sets the width of the stroke.<\/li>\n\n\n\n<li><strong>stroke-dasharray:<\/strong> Creates dashed lines.<\/li>\n\n\n\n<li><strong>transform:<\/strong> Applies transformations to the element (e.g., translation, rotation, scaling).<\/li>\n<\/ul>\n\n\n\n<p><strong>Example<\/strong><\/p>\n\n\n\n<p>HTML<\/p>\n\n\n\n<p>&lt;svg width=&#8221;200&#8243; height=&#8221;200&#8243;&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;circle cx=&#8221;100&#8243; cy=&#8221;100&#8243; r=&#8221;50&#8243; fill=&#8221;red&#8221; stroke=&#8221;black&#8221; stroke-width=&#8221;2&#8243; \/&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;text x=&#8221;100&#8243; y=&#8221;120&#8243; text-anchor=&#8221;middle&#8221; fill=&#8221;white&#8221;&gt;Hello, SVG!&lt;\/text&gt;<\/p>\n\n\n\n<p>&lt;\/svg&gt;<\/p>\n\n\n\n<p><strong>Using SVG Elements in Responsive Web Design<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Set dimensions:<\/strong> Use width and height attributes on the &lt;svg&gt; element to set its dimensions.<\/li>\n\n\n\n<li><strong>Use relative units:<\/strong> Use em or rem for dimensions to create responsive layouts.<\/li>\n\n\n\n<li><strong>Combine with CSS:<\/strong> Use CSS to style SVG elements and create complex effects.<\/li>\n\n\n\n<li><strong>Optimize SVG files:<\/strong> Use tools to optimize SVG files and reduce their file size.<\/li>\n<\/ul>\n\n\n\n<p>By understanding the basic elements and attributes of SVG, you can create scalable, responsive, and customizable graphics for your web designs. Experiment with different elements and attributes to create unique and visually appealing SVG graphics.<\/p>\n\n\n\n<div class=\"wp-block-buttons alignwide is-content-justification-space-between is-layout-flex wp-container-core-buttons-is-layout-3d213aab wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/understanding-a-basic-svg-svg\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>&lt;&lt;Prev<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certificate-in-responsive-web-design\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Back To The Tutorial<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/creating-svgs-svg\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Next&gt;&gt;<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>SVG (Scalable Vector Graphics) is a language for describing two-dimensional graphics. It consists of various elements that define shapes, paths, text, and other visual components. Common SVG Elements Attributes SVG elements have various attributes that can be used to customize their appearance and behavior. Common Attributes Example HTML &lt;svg width=&#8221;200&#8243; height=&#8221;200&#8243;&gt; &nbsp; &lt;circle cx=&#8221;100&#8243; cy=&#8221;100&#8243;&#8230;<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-137126","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Elements and Attributes of SVG | SVG - Tutorial<\/title>\n<meta name=\"description\" content=\"Prepare for the Certified Responsive Web Design Exam with expert guidance and online course. Get Certified Now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/elements-and-attributes-of-svg-svg\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Elements and Attributes of SVG | SVG - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Prepare for the Certified Responsive Web Design Exam with expert guidance and online course. Get Certified Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/elements-and-attributes-of-svg-svg\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-16T10:26:52+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/elements-and-attributes-of-svg-svg\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/elements-and-attributes-of-svg-svg\/\",\"name\":\"Elements and Attributes of SVG | SVG - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-10-14T07:39:21+00:00\",\"dateModified\":\"2024-10-16T10:26:52+00:00\",\"description\":\"Prepare for the Certified Responsive Web Design Exam with expert guidance and online course. Get Certified Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/elements-and-attributes-of-svg-svg\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/elements-and-attributes-of-svg-svg\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/elements-and-attributes-of-svg-svg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elements and Attributes of SVG | SVG\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elements and Attributes of SVG | SVG - Tutorial","description":"Prepare for the Certified Responsive Web Design Exam with expert guidance and online course. Get Certified Now!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/elements-and-attributes-of-svg-svg\/","og_locale":"en_US","og_type":"article","og_title":"Elements and Attributes of SVG | SVG - Tutorial","og_description":"Prepare for the Certified Responsive Web Design Exam with expert guidance and online course. Get Certified Now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/elements-and-attributes-of-svg-svg\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-10-16T10:26:52+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/elements-and-attributes-of-svg-svg\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/elements-and-attributes-of-svg-svg\/","name":"Elements and Attributes of SVG | SVG - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-10-14T07:39:21+00:00","dateModified":"2024-10-16T10:26:52+00:00","description":"Prepare for the Certified Responsive Web Design Exam with expert guidance and online course. Get Certified Now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/elements-and-attributes-of-svg-svg\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/elements-and-attributes-of-svg-svg\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/elements-and-attributes-of-svg-svg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Elements and Attributes of SVG | SVG"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=137126"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137126\/revisions"}],"predecessor-version":[{"id":137392,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137126\/revisions\/137392"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=137126"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=137126"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=137126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}