{"id":137142,"date":"2024-10-14T14:56:51","date_gmt":"2024-10-14T09:26:51","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=137142"},"modified":"2024-10-16T16:05:46","modified_gmt":"2024-10-16T10:35:46","slug":"reusing-graphical-objects-from-external-sources-svg","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/reusing-graphical-objects-from-external-sources-svg\/","title":{"rendered":"Reusing Graphical Objects from External Sources | SVG"},"content":{"rendered":"\n<p><strong>Understanding External Sources<\/strong><\/p>\n\n\n\n<p>When creating responsive web designs, it&#8217;s often beneficial to reuse graphical objects from external sources to save time and effort. These sources can include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Icon libraries:<\/strong> Websites like Font Awesome, Material Icons, and Ionicons provide a vast collection of icons that can be easily integrated into your designs.<\/li>\n\n\n\n<li><strong>Image libraries:<\/strong> Websites like Unsplash, Pixabay, and Pexels offer high-quality images that can be used for various purposes.<\/li>\n\n\n\n<li><strong>SVG libraries:<\/strong> Libraries like Iconify provide a collection of SVG icons that can be easily customized and integrated into your designs.<\/li>\n<\/ul>\n\n\n\n<p><strong>Methods of Reusing External Graphical Objects<\/strong><\/p>\n\n\n\n<p><strong>Embedding directly:<\/strong> Embed the graphical object directly into your HTML using an &lt;img&gt; tag or SVG code.<br><strong>Example (using an image):<br><\/strong>HTML<br>&lt;img src=&#8221;https:\/\/example.com\/image.jpg&#8221; alt=&#8221;Image&#8221;&gt;<\/p>\n\n\n\n<p><br><strong>Example (using SVG):<br><\/strong>HTML<br>&lt;svg width=&#8221;200&#8243; height=&#8221;200&#8243;&gt;<\/p>\n\n\n\n<p>&nbsp; &lt;use xlink:href=&#8221;https:\/\/example.com\/symbol.svg#my-symbol&#8221; \/&gt;<\/p>\n\n\n\n<p>&lt;\/svg&gt;<\/p>\n\n\n\n<p><strong>Using a JavaScript library:<\/strong> Libraries like jQuery or JavaScript&#8217;s DOM API can be used to dynamically load and manipulate external graphical objects.<br><strong>Example (using jQuery):<br><\/strong>JavaScript<br>$(document).ready(function() {<\/p>\n\n\n\n<p>&nbsp; $(&#8216;.my-element&#8217;).append(&#8216;&lt;img src=&#8221;https:\/\/example.com\/image.jpg&#8221;&gt;&#8217;);<\/p>\n\n\n\n<p>});<\/p>\n\n\n\n<p><strong>Best Practices<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Consider licensing:<\/strong> Ensure you have the necessary permissions to use external graphical objects.<\/li>\n\n\n\n<li><strong>Optimize images:<\/strong> Compress images to reduce file size and improve performance.<\/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>Test on various devices:<\/strong> Ensure that the graphical objects display correctly on different screen sizes and browsers.<\/li>\n\n\n\n<li><strong>Consider accessibility:<\/strong> Provide appropriate alt text for images and ensure that SVGs are accessible to users with disabilities.<\/li>\n<\/ul>\n\n\n\n<p>Reusing graphical objects from external sources can save time and effort when creating responsive web designs. By following these best practices, you can effectively incorporate external content into your projects while maintaining a high level of quality and accessibility.<\/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\/re-coloring-svgs-with-css-custom-properties-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\/coloring-svgs-with-mask-image-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>Understanding External Sources When creating responsive web designs, it&#8217;s often beneficial to reuse graphical objects from external sources to save time and effort. These sources can include: Methods of Reusing External Graphical Objects Embedding directly: Embed the graphical object directly into your HTML using an &lt;img&gt; tag or SVG code.Example (using an image):HTML&lt;img src=&#8221;https:\/\/example.com\/image.jpg&#8221; alt=&#8221;Image&#8221;&gt;&#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-137142","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>Reusing Graphical Objects from External Sources | SVG - Tutorial<\/title>\n<meta name=\"description\" content=\"Prepare for Certified Responsive Web Design Exam and pass on your first attempt. 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\/reusing-graphical-objects-from-external-sources-svg\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Reusing Graphical Objects from External Sources | SVG - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Prepare for Certified Responsive Web Design Exam and pass on your first attempt. Get Certified Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/reusing-graphical-objects-from-external-sources-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:35:46+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\/reusing-graphical-objects-from-external-sources-svg\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/reusing-graphical-objects-from-external-sources-svg\/\",\"name\":\"Reusing Graphical Objects from External Sources | SVG - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-10-14T09:26:51+00:00\",\"dateModified\":\"2024-10-16T10:35:46+00:00\",\"description\":\"Prepare for Certified Responsive Web Design Exam and pass on your first attempt. Get Certified Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/reusing-graphical-objects-from-external-sources-svg\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/reusing-graphical-objects-from-external-sources-svg\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/reusing-graphical-objects-from-external-sources-svg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Reusing Graphical Objects from External Sources | 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":"Reusing Graphical Objects from External Sources | SVG - Tutorial","description":"Prepare for Certified Responsive Web Design Exam and pass on your first attempt. 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\/reusing-graphical-objects-from-external-sources-svg\/","og_locale":"en_US","og_type":"article","og_title":"Reusing Graphical Objects from External Sources | SVG - Tutorial","og_description":"Prepare for Certified Responsive Web Design Exam and pass on your first attempt. Get Certified Now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/reusing-graphical-objects-from-external-sources-svg\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-10-16T10:35:46+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/reusing-graphical-objects-from-external-sources-svg\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/reusing-graphical-objects-from-external-sources-svg\/","name":"Reusing Graphical Objects from External Sources | SVG - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-10-14T09:26:51+00:00","dateModified":"2024-10-16T10:35:46+00:00","description":"Prepare for Certified Responsive Web Design Exam and pass on your first attempt. Get Certified Now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/reusing-graphical-objects-from-external-sources-svg\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/reusing-graphical-objects-from-external-sources-svg\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/reusing-graphical-objects-from-external-sources-svg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Reusing Graphical Objects from External Sources | 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\/137142","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=137142"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137142\/revisions"}],"predecessor-version":[{"id":137399,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/137142\/revisions\/137399"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=137142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=137142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=137142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}