چگونه یک تصویر PNG را به SVG تبدیل کنیم؟ تبدیل یک نماد SVG به کد برای استفاده در CSS نحوه تبدیل یک تصویر png به svg.

در یکی از پروژه ها، آیکون های کوچکی در نزدیکی منو نمایش داده می شد فرمت svgو می‌خواهید وقتی روی یکی از آیتم‌های منو می‌روید، رنگ متن و نماد تغییر کند. برای اینکه تکثیر نشود تعداد زیادیتصاویر، تصمیم گرفته شد svg را به کد ترجمه کرده و در سبک های CSS استفاده کنیم.

دستورالعمل های مختصر در مورد نحوه استفاده از SVG در CSS

ما از کد به دست آمده در فایل css خود استفاده می کنیم.

به عنوان مثال، نماد فیس بوک ( نماد استانداردبا کمی تغییر).

در وب سایت https://jakearchibald.github.io/svgomg/ کلیک کنید "باز کردن SVG"یا به سادگی نماد را روی ناحیه مشاهده بکشید. در گوشه سمت چپ بالا کلیک کنید "کد"، کد را هایلایت کرده و سپس بر روی آن کلیک کنید نماد کپی، بنابراین ما کد تصویر SVG خود را در بافر دریافت می کنیم.

چیزی شبیه این:

سپس کد به دست آمده را در پنجره بالا قرار دهید، روی Converte کلیک کنید و کد نهایی را دریافت کنید تصویر پس زمینه:

Background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"%3e%3cpath fill-rule="evenodd" clip-rule="evenodd" fill="%23FFF" d="M12.748 16v-1h6v1h-6zm0-3h6v1h-6v-1zm4 5 ساعت -4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5.45 0.017.005.005.005. -3v3h3v8h3v-8h4z"/%3e%3c/svg%3e");

کپی کنید و در css خود استفاده کنید.

برای تغییر رنگ، fill="%23FFF" را تغییر دهید، فقط به خاطر داشته باشید که %23 یک علامت # منظم است، یعنی fill="%23000" یک سیاه و سفید معمولی است (#000).

بسته به چراشما می خواهید از png. به .svg تبدیل کنید، ممکن است نگران نباشید. تبدیل از .png (راستر) به .svg (بردار) می تواند دردسرساز باشد اگر با ابزارهای موجود آشنا نیستید یا با ابزارهای موجود آشنا نیستید. طراح گرافیکتوسط حرفه

اگر کسی فایل بزرگی را با وضوح بالا(به عنوان مثال 1024x1024)، می توانید اندازه آن را تقریباً به هر اندازه ای که می خواهید در GIMP استفاده کنید تغییر دهید. اگر وضوح تصویر (پیکسل در هر اینچ) خیلی کم باشد، مشکل در تغییر اندازه تصویر معمول است. برای رفع این مشکل در GIMP می توانید:

1. File -> Open: فایل png. شما
2. Image -> Image Properties: وضوح و فضای رنگ را بررسی کنید. شما رزولوشن حدود 300 ppi می خواهید. در بیشتر موارد، شما می خواهید فضای رنگی RGB باشد.
3. Image -> Mode: مقدار RGB را تنظیم کنید
4. Image -> Scale Image: اندازه را جدا بگذارید و وضوح Y را روی 300 یا بیشتر تنظیم کنید. مقیاس ضربه.
5. Image -> Scale Image: وضوح تصویر اکنون باید 300 باشد و اکنون می توانید اندازه تصویر را تقریبا به هر اندازه ای تغییر دهید.

به آسانی تغییر اندازه یک فایل .svg نیست، اما مطمئناً آسان‌تر و سریع‌تر از تبدیل png. به svg. اگر از قبل یک تصویر بزرگ و با وضوح بالا دارید.

با adobe illustrator:

Adobe Illustrator را باز کنید. روی "File" کلیک کنید و "Open" را انتخاب کنید تا فایل .PNG در برنامه بارگذاری شود. قبل از اینکه تصویر را به عنوان فایل SVG ذخیره کنید، آن را در صورت نیاز استخراج کنید. روی "File" کلیک کنید و "Save As" را انتخاب کنید. یک نام فایل جدید ایجاد کنید یا از یک نام موجود استفاده کنید. مطمئن شوید که نوع فایل انتخابی SVG باشد. یک دایرکتوری را انتخاب کنید و روی "ذخیره" کلیک کنید تا فایل ذخیره شود.

من هوش مصنوعی را ترجیح می دهم زیرا شما می توانید هر تغییری ایجاد کنید

من همین الان این سوال و جواب را پیدا کردم که سعی می کنم همین کار را انجام دهم! من نمی خواستم از برخی از ابزارهای دیگر ذکر شده استفاده کنم. (نمی خواهم من را بفرستم ایمیلو نمی خواهم پرداخت کنم). من متوجه شدم که Inkscape (نسخه 0.91) می تواند کاملاً یک کار انجام دهد کار خوب. این آموزش سریع و آسان قابل درک است.

به سادگی انتخاب یک بیت مپ در Inkskape و Shift + Alt + B.

Sudo apt-get install potrace imagemagick convert -flatten input.png output.pbm potrace -s output.pbm -o output.svg rm output.pbm

یک وب سایت وجود دارد که می توانید تصویر خود را آپلود کنید و نتیجه را ببینید.

اما اگر می خواهید تصویر svg را دانلود کنید، باید ثبت نام کنید. (در صورت ثبت نام 2 عکس به صورت رایگان دریافت خواهید کرد)

با این حال، این ایده آل نیست.

Png یک سبک بیت مپ است و SVG یک طرح گرافیکی برداری است که پشتیبانی می کند تصاویر شطرنجی، بنابراین تصویر را به بردار تبدیل نمی کند، بلکه فقط تصویر جاسازی شده در فرمت برداری را تبدیل می کند. می توانید این کار را با استفاده از http://www.inkscape.org/ که رایگان است انجام دهید. آن را تزریق می کند، با این حال یک موتور Live Trace نیز دارد که در صورت تمایل سعی می کند آن را به مسیر تبدیل کند (با استفاده از potrace). به ردیابی مستقیم در Adobe Illustrator (تجاری) مراجعه کنید یک مثال است:

فک کنم میخوای بنویسی نرم افزاربرای این برای انجام این کار ساده لوحانه، شما به سادگی خطوط را پیدا کرده و بردارها را تنظیم می کنید. برای انجام هوشمندانه این کار، سعی می‌کنید شکل‌ها را با طراحی مطابقت دهید (مدل مناسب). علاوه بر این، باید سعی کنید مناطق شطرنجی را تعریف کنید (مناطقی که نمی‌توانید با استفاده از shames یا استفاده از بافت‌ها مدل‌سازی کنید. من رفتن به این مسیر را توصیه نمی‌کنم زیرا زمان زیادی طول می‌کشد و نیاز به دانش گرافیکی و بینایی کامپیوتری دارد. ، خروجی به طور قابل توجهی و مقیاس بسیار بهتر از نتیجه اصلی شما خواهد بود.

اگر در برخی هستید سیستم لینوکس، imagemagick عالی است. آن ها

تبدیل somefile.png somefile.svg

این با هزاران فرمت مختلف کار می کند.

با این حال، برای رسانه های دیگر مانند ویدئو و صدا (ffmpeg)، می دانم که شما به وضوح png را به svg بیان کردید. هنوز در مورد رسانه است.

Ffmpeg -i somefile.mp3 somefile.ogg

اگر می‌خواهید فایل‌های زیادی را مرور کنید، فقط یک نکته. حلقه با استفاده از ترفندهای پوسته اولیه.

برای f در *.jpg; $f $(f%jpg)png را تبدیل کنید. انجام شد

این jpg را حذف می کند و png را اضافه می کند که به آن می گوید آنچه را که می خواهید تبدیل کند.

از نویسنده:تصاویر SVG به اندازه فرمت های شطرنجی مورد علاقه ما، PNG و JPG رایج نیستند، اما مزایای گرافیک برداری، طراحان بیشتری را به خود جلب می کند. طراحان به طور فزاینده ای از گرافیک برداری در پروژه های خود استفاده می کنند. قبلاً مجبور بودیم برنامه‌های دسکتاپ مانند Adobe Illustrator و Inkscape را دانلود کنیم، اما در سال 2017 می‌توانیم بدون خروج از مرورگر، گرافیک‌های برداری طراحی کنیم. اگر به دنبال یک ویرایشگر SVG رایگان بوده اید، می توانید با این شش ابزار رایگان شروع کنید.

وکتور

وکتور – انتخاب خوببرای کاربران مبتدی و پیشرفته SVG. رابط کاربری شسته و رفته است و با ابزارهای زیادی که از آنها استفاده نخواهید کرد، شلوغ نیست. این ویرایشگر برای مبتدیان در تصویر برداری وکتور مناسب است. کاربر نباید در میان ابزارهایی که برای چه منظوری استفاده نمی شوند گم شود. این کیت شامل چندین درس است. حتی اگر در SVG تازه کار هستید، می توانید به سرعت یاد بگیرید.

با این حال، تمام موارد فوق به این معنی نیست که Vectr عملکرد ضعیفی دارد. همه چیز دارد مجموعه پایهبرای ایجاد یک تصویر معمولی: اشکال، متن، لایه ها، سایه ها، قاب ها، پس زمینه و غیره. نمی توان آن را با یک ویرایشگر دسکتاپ تمام عیار مقایسه کرد، اما برای طراحی و ویرایش سریع، بیش از حد کافی است. می توانید یک تصویر از ابتدا ایجاد کنید یا یک تصویر موجود را آپلود کنید.

هنگام بارگیری تصاویر پیچیده در Vectr (نقشه ها یا نمودارهای دقیق) ممکن است خطاهایی رخ دهد. ویرایشگر همیشه گرافیک های پیچیده را به خوبی اداره نمی کند. با این حال، برای SVG ساده تر (آیکون ها، آرم ها، و غیره) این ویرایشگر کافی خواهد بود.

جاوا اسکریپت. شروع سریع

اگر در نسخه های آنلاینهیچ عملکردی نیاز ندارید، می توانید نسخه دسکتاپ برنامه را دانلود کنید. این ویرایشگر برای Windows، Mac، Linux و Chromebook در دسترس است.

شاید جالب ترین ویژگی Vectr این باشد که می توانید تصاویر را مستقیماً از سایت Vectr پیوند داده و جاسازی کنید و آن را به یک سرویس میزبانی SVG موثر تبدیل کنید. بسیاری از سرویس ها بارگیری ها را مسدود می کنند فایل های SVG، بنابراین این یک مزیت جدی است. شما می توانید تصاویر SVG را از Vectr در سایت های راه دور مانند WP، Medium، Tumblr و غیره نمایش دهید که بارگذاری مستقیم SVG را مسدود می کنند اما اجازه می دهند از راه دور نشان داده شود.

Vectr به شما امکان می دهد به اشتراک بگذارید گرافیک برداریدر پنل ویرایشگر قرار دهید تا سایر کاربران بتوانند گرافیکی که ایجاد می کنید را ویرایش کنند. یعنی شما می توانید برای مثال یک الگوی لوگوی SVG بسازید که کاربران بتوانند آن را به دلخواه شخصی سازی کنند. همه اینها در مرورگر.

به همین منظور، Vectr اخیراً نسخه ای از ویرایشگر را در فرم منتشر کرده است پلاگین برای WP.

RollApp

بر خلاف سایر ابزارهای موجود در لیست، وقتی به صفحه اصلی RollApp، ویرایشگر در مقابل شما باز نمی شود. RollApp مجموعه ای از برنامه ها است و ویرایشگر SVG تنها یکی از برنامه های کاربردی است. ابزار عالی، نسخه مرورگر است Inkscape.

برای استفاده از RollApp به یک حساب کاربری نیاز دارید. می توانید ثبت نام کنید یا با آن وارد شوید با استفاده از گوگل، فیس بوک، آمازون. بسیار راحت است، من از ایجاد هزاران حساب جدید فقط برای دیدن برنامه متنفرم.

Inkscape در بهترین حالت خود! بدون شک RollApp پر ویژگی ترین اپلیکیشن موجود در لیست است. شما به معنای واقعی کلمه از Inkscape در مرورگر خود استفاده می کنید! من همه جزئیات را مقایسه نکرده‌ام، اما به نظر می‌رسد که این برنامه همه ویژگی‌های Incscape مانند لایه‌ها، اشیاء، متن، مسیرها، فیلترها، افکت‌ها، پسوندها و غیره را دارد.

فایل های بزرگبه سرعت پردازش نمی شوند، زیرا اقدامات بر روی سرورهای برنامه و از طریق اینترنت انجام می شود. به طور خلاصه، اگر نیاز به ویرایش فایل های حجیم و پیچیده دارید، RollApp گزینه ایده آلی نخواهد بود، اما برای کارهای دیگری که در مجموعه اولیه گنجانده نشده است، این ویرایشگر بهتر از سایرین است.

باکسی اس وی جی

اگر مدت زیادی است که SitePoint را مطالعه کرده اید، باید با ویرایشگر آن آشنا باشید باکسی اس وی جی، زیرا در 12 ماه گذشته قبلاً در مورد او صحبت کرده ایم. من آن را انجام نمی دهم بررسی دقیق، از آنجایی که این قبلاً در سال انجام شده است این مقاله.

جاوا اسکریپت. شروع سریع

کاوش کنید اصول اولیه جاوا اسکریپتدر یک مثال عملی از ایجاد یک برنامه وب

آنچه مهم است این است که از زمان بررسی Alex، BoxySVG یک بازرس کد اضافه کرده است که آن را به یکی از مرتبط ترین ابزارهای SVG برای توسعه دهندگان وب تبدیل کرده است.

جانواس

یکی دو سال پیش جانواسیک ویرایشگر SVG بسیار محبوب بود. متأسفانه، این ویرایشگر اخیراً توسعه نیافته است، اما با این وجود هنوز کار می کند. وب رو به جلو است، اما جانواس راکد است، بنابراین علاقه به آن کم رنگ شده است. الکس از SitePoint در سال 2013-2014 کمی با این ابزار کار کرد (از جمله نسخه پولی) و حتی برای مدتی به سوالات پاسخ داد صفحه گوگل+ Janvas ابزار بسیار قدرتمندی بود.

مشکل اصلی Janvas این است که کمی قدیمی است. مرورگرها تکامل می یابند و برنامه هایی که از مرورگرها پیروی نمی کنند، هر روز پایدارتر می شوند. Janvas دارای ویژگی های بسیاری است: اشکال، متن، ابزارهای ترسیم، مسیرها، ماسک ها و لایه ها. با این حال، کاربران در انجمن ها می گویند که بسیاری از این توابع نتایج مطلوب را به ارمغان نمی آورند.

خبر خوبی وجود دارد - منتشر خواهد شد نسخه جدیدبه عنوان یک برنامه کروم امیدواریم مشکلات را برطرف کنند.

DrawSVG

ممکن است قبلا یک ویرایشگر آنلاین رایگان SVG را انتخاب کرده باشید. اگر نه، پس ادامه دهید. DrawSVGیک ویرایشگر SVG کاملا سازگار با بسیاری از ویژگی ها است. من واقعاً دوست دارم که طراحی این برنامه واقعاً برای وب طراحی شده است و شبیه پورت یک برنامه دسکتاپ به مرورگر نیست. منو در سمت چپ قرار دارد.

با DrawSVG می توانید اشیاء را ترسیم، اصلاح و رندر کنید. شما می توانید اشکال ساده بکشید، منحنی های Bezier، متن مستقیم و منحنی، بسیاری از سبک های strokes و fill و غیره وجود دارد. SVG همچنین می تواند به PNG صادر شود.

SVG-ویرایش

SVG-ویرایش- پدربزرگ ویراستاران آنلاینگرافیک برداری، در اواسط دهه 2000 ظاهر شد. هیچ عملکرد سرور وجود ندارد، همه چیز در مرورگر کار می کند. غیر ممکن است که کار خود را بدون اضافه کردن عملکرد خود ذخیره کنید.

با این حال، برای ویرایشگری که زندگی اش به عنوان یک برنامه ترسیم برداری بسیار محدود و مبهم آغاز شد، عملکرد SVG-edit به طور مداوم بهبود یافته است.

با استفاده از SVG-edit می‌توانید اشکال ساده (خطوط، مستطیل، دایره، چند ضلعی، خطوط آزاد و غیره) ترسیم کنید، از مسیرها، لایه‌ها، گرادیان‌ها استفاده کنید، می‌توانید منابع SVG را مشاهده و ویرایش کنید، به PNG، JPEG، BMP، WEBP صادر کنید. و غیره

نتیجه گیری

علاوه بر این 6 ویرایشگر SVG، ویرایشگرهای دیگری نیز وجود دارند، اما تعداد کمی از آنها عملکرد بیشتری نسبت به پنج ویرایشگر نشان داده شده در بالا ارائه می دهند.

اگر می خواهید در مورد SVG جدی باشید و این ابزارها عملکرد مورد نیاز شما را ندارند، همیشه می توانید یک ویرایشگر SVG دسکتاپ مانند Illustrator یا Inkscape را دانلود کنید. با این حال، برای سهولت، سرعت و انعطاف پذیری، همه ویرایشگرهای فوق مجموعه ای مفید از ویژگی ها را ارائه می دهند.

PS: شما همچنین می توانید امتحان کنید فیگما. این بیشتر یک ابزار ایجاد رابط کاربری است تا یک ویرایشگر SVG. با این حال، مجموعه ای عالی از ابزارها دارد و کد SVG به خوبی بهینه سازی شده را تولید می کند.

تصویر SVG یک فرمت برداری اصلی برای نسل بعدی وب سایت ها است و به طور کامل با استانداردهای جدید HTML5 ادغام شده است. با Aurora SVG Viewer & Converter: می توانید به راحتی گرافیک های SVG را مشاهده کرده و تولیدات خود را به چندین فرمت تبدیل کنید.

ظهور HTML5 باعث استفاده بیشتر از تصاویر برداری با فرمت SVG شده است. اگر یک توسعه‌دهنده وب هستید، اکنون زمان مناسبی برای پیشرفت است بازیو گردش کار خود را با هر آنچه که برای کار با تصاویر HTML5 و SVG نیاز دارید، تجهیز کنید. اولین قدم این است که یک کپی از تبلیغات نرم افزاری با تخفیف امروزی، در دسترس را بگیرید برای مکو کاربران ویندوز!

نمایشگر و مبدل Aurora SVGسازماندهی، مشاهده و تبدیل تصاویر SVG را آسان می کند. با نمایشگر و مبدل Aurora SVG، از حالت نمایش تصاویر کوچک راحت و نمای پوشه ای که فوراً قابل تشخیص است لذت خواهید برد. اگر نیاز به تبدیل یک تصویر SVG به فرمت دیگری دارید، نمایشگر و مبدل Aurora SVGبه شما امکان می دهد تصاویر را به عنوان فایل های TIFF، PNG، JPB، BMP، GIF، TGA، XPM، PPM، XBM یا حتی PDF ذخیره کنید، روز را صرفه جویی می کند. حتی بهتر از آن، می توانید چندین فایل را به صورت دسته ای تبدیل کنید!

البته شما همیشه روی جزئیات کنترل کامل دارید نمایشگر و مبدل Aurora SVG. وضوح خروجی را تنظیم کنید، بخش هایی از تصاویر SVG را تبدیل کنید و کیفیت تبدیل را تنظیم کنید!

اسکرین شات ویندوز: اسکرین شات مک:

ویژگی های Aurora SVG Viewer & Converter:

1. پشتیبانی ویندوز و سیستم عامل مک

2. آسان انتخاب پوشهو نمایش تصویر کوچکحالت

3. به سرعت پیش نمایش تصاویر SVG یا تبدیل آنها. پشتیبانی می کند SVG و SVGZ.

4. مبدل SVG به فرمت های تصویری متعدد عبارتند از: tiff، png، jpg، bmp، gif، tga، xpm، ppm، xbm، و pdf.

5. تبدیل دسته ای، لیستی از تصاویر را برای تبدیل تهیه کنید و سپس در یک حرکت آنها را تبدیل کنید و در پوشه دیگری ذخیره کنید.

6. وضوح خروجی به راحتی با وضوح زوم آزاد تنظیم می شود. را انتخاب کنید وهر ناحیه از بوم SVG را تبدیل کنید.

7. هر منطقه ای را که انتخاب می کنید، سفارشی کنید: یک ناحیه از تصویر SVG را انتخاب کرده و تبدیل کنید.