"; 2. Use the object tag with the syntax "
"; 3. Use the iframe tag with the syntax "
"."/><meta property="og:local" content="faq"> <meta property="og:title" content="How to display svg images in css-CSS Tutorial-php.cn"> <meta property="og:description" content="Display method: 1. Use the embed tag with the syntax "<embed src="svg image address">"; 2. Use the object tag with the syntax "<object data="image address">"; 3. Use the iframe tag with the syntax " <iframe src="image address">"."> <meta property="og:url" content="https://m.php.cn/faq/474555.html"> <meta property="og:image" content="https://img.php.cn/upload/article/202104/22/2021042211302518945.jpg"> <meta property="og:site_name" content="php.cn"> <meta property="og:type" content="website"> <link rel="canonical" href="https://m.php.cn/faq/474555.html"/> <link rel="alternate" hrefLang="zh-cn" href="https://m.php.cn/zh/faq/474555.html" /> <link rel="alternate" hrefLang="en" href="https://m.php.cn/faq/474555.html" /> <link rel="alternate" hrefLang="zh-tw" href="https://m.php.cn/zh-tw/faq/474555.html" /> <link rel="alternate" hrefLang="ja" href="https://m.php.cn/ja/faq/474555.html" /> <link rel="alternate" hrefLang="ko" href="https://m.php.cn/ko/faq/474555.html" /> <link rel="alternate" hrefLang="ms" href="https://m.php.cn/ms/faq/474555.html" /> <link rel="alternate" hrefLang="fr" href="https://m.php.cn/fr/faq/474555.html" /> <link rel="alternate" hrefLang="de" href="https://m.php.cn/de/faq/474555.html" /> <meta charset="utf-8" /><meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"><meta name="applicable-device" content="mobile" /><link rel="stylesheet" href="/static/css/style.css?4.5.31"><link href="/static/front/mobcss/newphpcommon.css?1.1" type="text/css" rel="stylesheet"/><link href="/static/front/mobcss/swiper.min.css" type="text/css" rel="stylesheet"/><link href="/static/front/mobcss/newphp.css?1.2" type="text/css" rel="stylesheet"/><link href="/static/css/global.css" type="text/css" rel="stylesheet"/><link href="/static/layui/css/layui.css" type="text/css" rel="stylesheet"/><link href="/static/mobcss/mobindex3.css" type="text/css" rel="stylesheet"/><script src="/static/front/mobjs/jquery-1.6.1.min.js"></script><script src="/static/front/mobjs/swiper.min.js"></script><script src="/static/front/mobjs/newphpcommon.js"></script><script> var canshu = { SeeMore:'See more', FoldUp:'Fold up', Choice:'LANGUAGE', wait:'Loading, please wait~', LoginFirst:"Please log in first", needKeyword:'Enter keyword search', emailPhoneError:'Please enter the correct phone or email address', missPwd:'Please enter the password', emailError:'Please enter your correct email address', VerCode:"Please enter the verification code", getCode:'Sending', pwdError:'Incorrect password format', TwoPassNotMatch:'Two passwords do not match', Bindemail:'Bind email', resetpassword:'reset password', ConfirmPass:'Confirm Password', pwdCheck:'Please enter 6-18 letters or numbers', Editinfor: 'Edit personal information', trimContent:'Please enter content', titleCheck:'Title should be at least 5 words long', choiceLang:'Please select a language classification', Secondreply:'reply', NetWorkError:'Network error, please try again later!', all_lang_string:'zh|en|zh-tw|ja|ko|ms|fr|de' }; </script><!-- Google Tag Manager --><script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-WWVXRJPW'); </script><!-- End Google Tag Manager --><!-- Google tag (gtag.js) --><script async src="https://www.googletagmanager.com/gtag/js?id=G-H42EVCYBJC"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-H42EVCYBJC'); </script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5902227090019525" crossorigin="anonymous"></script><!--<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6267705206177514" crossorigin="anonymous"></script>--><meta property="article:author" content="醉折花枝作酒筹" /><meta property="article:published_first" content=",https://www.php.cn/faq/474555.html" /><link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css?1"><link rel="stylesheet" href="/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault1.css"><link href="/static/mobcss/newphp.css" type="text/css" rel="stylesheet"/><script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script><script> var xnb_name = 'Virtual currency'; </script><script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","headline":"How to display svg images in css","description":"Display method: 1. Use the embed tag with the syntax \"<embed src=\"svg image address\">\"; 2. Use the object tag with the syntax \"<object data=\"image address\">\"; 3. Use the iframe tag with the syntax \" <iframe src=\"image address\">\".","image":["https:\/\/img.php.cn\/upload\/article\/202104\/22\/2021042211302518945.jpg"],"datePublished":"2021-04-22T11:47:51+8:00","author":{"url":"http:\/\/m.php.cn\/member\/810213.html","name":"醉折花枝作酒筹"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/m.php.cn\/faq\/474555.html"},"url":"https:\/\/m.php.cn\/faq\/474555.html","articleBody":"<blockquote><p>Display method: 1. Use the embed tag with the syntax \"2db47fcf90e5aaab512ec7b988c718c4\"; 2. Use the object tag with the syntax \"3a7456719e997a35a9a7c379f746a505 \"; 3. Use the iframe tag with the syntax \"e48e878a68dc76e33b6e5290b7e81f72\". <\/p><\/blockquote>\n<p><img src=\"https:\/\/img.php.cn\/upload\/article\/202104\/22\/2021042211302518945.jpg\" alt=\"How to display svg images in css\" ><\/p>\n<p>The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer. <\/p>\n<p>SVG files can be embedded in HTML documents through the following tags and displayed: d8e2720730be5ddc9c2a3782839e8eb6, 273238ce9338fbb04bee6997e5552b95 or d5ba1642137c3f32f4f4493ae923989c<\/p>\n<p>Detailed explanation:<\/p>\n<p>1. Use d8e2720730be5ddc9c2a3782839e8eb6 tag <br><\/p><pre class=\"brush:js;toolbar:false\"><embed src=\"circle1.svg\" type=\"image\/svg+xml\" \/><\/pre><p>2. Use 273238ce9338fbb04bee6997e5552b95 tag <br><\/p><pre class=\"brush:php;toolbar:false\"><object data=\"circle1.svg\" type=\"image\/svg+xml\"><\/object><\/pre><p>3. Use d5ba1642137c3f32f4f4493ae923989c tag <br><\/p><pre class=\"brush:html;toolbar:false\"><iframe src=\"circle1.svg\"><\/iframe><\/pre><p>Recommended learning: <a href=\"https:\/\/www.php.cn\/course\/list\/12.html\" target=\"_blank\">css video tutorial<\/a><\/p>"}</script></head><body><div class="bodyBg"><!--头部--><div class="nphpHead"><div class="nphpTop"><div class="nphpTopIn"><div class="nphpLogo"><a href="http://m.php.cn/" title="php.cn"></a></div><div class="nphpSubmit"><!-- <a href="http://m.php.cn/search" class="bg1"></a> --><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><a href="http://m.php.cn/login" class="bg3"></a></div></div></div><div class="nphpNav"><div class="nphpNavIn"><div class="swiper-container nphpNavSwiper"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai" >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="swiper-slide"><a href="http://m.php.cn/update/article_0_1.html" >Recent Updates</a></div><div class="clear"></div></div></div><script> var swiper = new Swiper('.nphpNavSwiper', { slidesPerView : 'auto' }); </script></div></div></div><!--头部 end--><div class="bodyMain"><!--所在位置--><div class="nphpSize"><div class="nphpSizeIn"><b></b><p><a href="http://m.php.cn/" title="Home" class="bBlack">Home</a> > <a href="http://m.php.cn/article.html" title="Article" class="bBlack">Article</a> > <a href="http://m.php.cn/web-designer.html" class="cBlack">Web Front-end</a> > How to display svg images in css</p><!-- <p><a href="http://m.php.cn/article.html" class="cBlack">Technical Articles</a> > <a href="http://m.php.cn/web-designer.html" class="cBlack">Web Front-end</a> > <a href="http://m.php.cn/css-tutorial.html" class="cBlack">CSS Tutorial</a> > How to display svg images in css</p> --><div class="clear"></div></div></div><div class="nphpQianBox"><div class="nphpQianTitle"><h1>How to display svg images in css</h1><div class="nphpQianTitleIn"><span><img data-src="https://img.php.cn/upload/avatar/000/810/213/605455c1369f4215.jpg" alt="醉折花枝作酒筹" class="lazyload" src="/static/front/mobimages/moren/moren.png" /></span><dl><dt><em>醉折花枝作酒筹</em><i class='bg1'>Original</i><div class="clear"></div></dt><dd><em>2021-04-22 11:47:51</em><i>5651browse</i><div class="clear"></div></dd></dl><div class="clear"></div></div></div><div class="nphpQianCont wenda-list"><blockquote><p>Display method: 1. Use the embed tag with the syntax "2db47fcf90e5aaab512ec7b988c718c4"; 2. Use the object tag with the syntax "3a7456719e997a35a9a7c379f746a505 "; 3. Use the iframe tag with the syntax "e48e878a68dc76e33b6e5290b7e81f72". </p></blockquote> <p><img src="https://img.php.cn/upload/article/202104/22/2021042211302518945.jpg" alt="How to display svg images in css" ></p> <p>The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer. </p> <p>SVG files can be embedded in HTML documents through the following tags and displayed: d8e2720730be5ddc9c2a3782839e8eb6, 273238ce9338fbb04bee6997e5552b95 or d5ba1642137c3f32f4f4493ae923989c</p> <p>Detailed explanation:</p> <p>1. Use d8e2720730be5ddc9c2a3782839e8eb6 tag <br></p><pre class="brush:js;toolbar:false"><embed src="circle1.svg" type="image/svg+xml" /></pre><p>2. Use 273238ce9338fbb04bee6997e5552b95 tag <br></p><pre class="brush:php;toolbar:false"><object data="circle1.svg" type="image/svg+xml"></object></pre><p>3. Use d5ba1642137c3f32f4f4493ae923989c tag <br></p><pre class="brush:html;toolbar:false"><iframe src="circle1.svg"></iframe></pre><p>Recommended learning: <a href="https://www.php.cn/course/list/12.html" target="_blank">css video tutorial</a></p><p>The above is the detailed content of How to display svg images in css. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Detailed explanation of several techniques for using pure CSS to achieve the scrolling progress bar effect" href="http://m.php.cn/faq/474545.html">Detailed explanation of several techniques for using pure CSS to achieve the scrolling progress bar effect</a></span><span>Next article：<a class="dBlack" title="Detailed explanation of several techniques for using pure CSS to achieve the scrolling progress bar effect" href="http://m.php.cn/faq/474596.html">Detailed explanation of several techniques for using pure CSS to achieve the scrolling progress bar effect</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/474512.html" title="How to set scroll bar width in css" class="aBlack">How to set scroll bar width in css</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/474516.html" title="How to set padding in css" class="aBlack">How to set padding in css</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/474521.html" title="How to set td overflow hiding in css" class="aBlack">How to set td overflow hiding in css</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/474524.html" title="How to change color on click in css" class="aBlack">How to change color on click in css</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/474545.html" title="Detailed explanation of several techniques for using pure CSS to achieve the scrolling progress bar effect" class="aBlack">Detailed explanation of several techniques for using pure CSS to achieve the scrolling progress bar effect</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/"><b class="icon1"></b><p>Home</p></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai" >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>