آموزش بکار بردن SVG در HTML

[runy 221]

سلام

یه فایل SVG خودم ساختم ولی نمی دونم چطور باید در کد نویسی فراخوانی و ازش به عنوان آیکون فونت استفاده کنم.

ممنون میشم دوشتان آموزشش را بزارند

[استاد اعظم 900]

دقیقا مثل عکس های معمولی :

<img src="image.svg" />

برای تعیین ارتفاع و عرش هم میتونی بهش استایل بدی

[runy 221]

دقیقا مثل عکس های معمولی :

<img src="image.svg" />

برای تعیین ارتفاع و عرش هم میتونی بهش استایل بدی

اینکار را کردم ولی رنگش تغییر نمیکنه .

می خوام بتونم بهش رنگ هم بدم و در مواقعی مثلا در آندازه خاصی رنگش تغییر کنه.

با این رنگش چه کنم؟؟؟

[استاد اعظم 900]

از خوصوصیت fill استفاده کنید ، مثلا

fill: #CFCFCF;

[runy 221]

از خوصوصیت fill استفاده کنید ، مثلا

fill: #CFCFCF;

چطوری باید استفاده کنم

من اینطوری استفاد ه کردم نشد :

.iconfont img{
color:#DF3E41;
fill: #CFCFCF;
}
.iconfont{
width:200px;
height:100px;
color:#DF3E41;
fill: #CFCFCF;
}

[استاد اعظم 900]

در داخل تگ های اصلی فایل svg کلاس p-sv را به تگ patch بدید و اینطور استفاده کنید :

.p-sv{
fill: #CFCFCF;}

[runy 221]

در داخل تگ های اصلی فایل svg کلاس p-sv را به تگ patch بدید و اینطور استفاده کنید :

.p-sv{
fill: #CFCFCF;}

کاری که من کردم :

<div class="iconfont">
<img class="p-sv" src="<?php bloginfo('template_url'); ?>/images/svg/road41.svg"  >
</div>

.iconfont{
width:200px;
height:100px;
color:#DF3E41;

}
.p-sv{
fill: #ED1014;

}

ولی بازم نشد

[استاد اعظم 900]

فایل عکس svg را باز و هر چه تگ patch هست کلاس p-sv بهش بدید :

<svg ...>
  <ellipse  .../>
  <path class="p-sv" .../>
</svg>

[سحر12 0]

سلام من دنبال کدی میگردم که با circle svgتو Html بتونم ایکن twitter طراحی کنم میشه کمکم کنید

 

[asadiy4n 2807]

در 2 ساعت قبل، سحر12 گفته است :

سلام من دنبال کدی میگردم که با circle svgتو Html بتونم ایکن twitter طراحی کنم میشه کمکم کنید

سلام به انجمن خوش آمدید

بهتر بود یک تایپیک جدید ایجاد می کردید

نمیدونم چرا راه سخت رو استفاده میکنید با fontawesome هم میتونید اینکارو انجام بدید

https://www.w3schools.com/html/html5_svg.asp
https://www.w3schools.com/graphics/svg_examples.asp
https://www.w3schools.com/graphics/svg_intro.asp
// نمونه ها
https://codepen.io/tag/svg
https://codepen.io/elliz/pen/BpqVzG