হরফ ফন্ট থেকে এসভিজি উত্তোলন


93

আমি ফন্ট আশ্চর্য গ্লাইফগুলি থেকে এসভিজি পাথ ডেটা পেতে চাই যাতে আমি তাদের সরাসরি আমার এইচটিএমএলে এসভিজি হিসাবে ব্যবহার করতে পারি। আমি ভেবেছিলাম এটি ফন্টউইজ-ওয়েবফন্ট.এসভিজি থেকে পাথের ডেটা অনুলিপি করার মতোই সহজ হবে , তবে আমি যখন এটি আমার এইচটিএমএলে ব্যবহার করি তখন চিহ্নগুলি সমস্তই উল্টোদিকে উপস্থাপিত হয়। কেউ জানেন কেন?

( ফিডল দেখুন )

হরফ এসভিজি হরফ:

<glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />

... এইচটিএমএল এসভিজিতে পোর্ট করা হয়েছে (এবং এটি ছোট করে দেওয়া হয়েছে):

<svg width="1000" height="1000" ><path transform="scale(0.1,0.1)" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z"/></svg>

উত্তর:


63

সমস্ত এসভিজি স্পেসিফিকেশন ...

এসভিজির মানক গ্রাফিক্সের বিপরীতে যেখানে প্রাথমিক স্থানাঙ্ক ব্যবস্থায় ওয়াই-অক্ষগুলি নীচের দিকে ইশারা করে সেখানে এসভিজি ফন্টগুলির জন্য নকশা গ্রিডের সাথে গ্লাইফগুলির জন্য প্রাথমিক সমন্বয় ব্যবস্থা সহ y- অক্ষটি স্বীকৃত শিল্প অনুশীলনের সাথে সামঞ্জস্যের জন্য উপরের দিকে নির্দেশ করছে অনেক জনপ্রিয় ফন্ট ফর্ম্যাট।

অনুযায়ী এই মন্তব্যটি , এর মোড়কের পরিবর্তন <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>, কৌতুক করতে যেখানে মনে হয় 1792 ইউনিট-প্রতি-এম এবং 1536 ফন্ট সামনি উপাদান চড়াই হয়


6
এই উত্তরটি সম্পূর্ণতার, মোড়কের পরিবর্তন করার জন্য করতে <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>কৌতুক, যেখানে না বলে মনে হয় 1792হয় units-per-emএবং 1536হয় ascentউপর font-faceউপাদান।
ম্যাকামে

4
পুনঃ 1792 is the units-per-emটাইপো? আমি মনে করি এটি 179.2উচ্চতা / প্রস্থের সাথে মিলিত হবে ।
নাট কুক

100

এই গিথুব রেপো থেকে কেবল প্রস্তুত এসভিজি আইকনগুলি পান
তারা ইতিমধ্যে উল্টানো হয়েছে এবং প্রয়োজন অনুযায়ী কেন্দ্রিক

এখানে চিত্র বর্ণনা লিখুন

যে কোনও ফাইল এবং তারপরে "কাঁচা" টিপুন এখানে চিত্র বর্ণনা লিখুন


10
আমি এর মধ্যে অনেকগুলি আইকন পেয়েছি যা উভয় পক্ষেই কাটা হয়েছিল, উদাহরণস্বরূপ গাড়ি
Bankzilla

21

4
হ্যা ইকোমুন দুর্দান্ত
ইয়ারিন

4
আইকোমুন ব্যবহার করা খুব সহজ, তবে আমি দেখতে পেয়েছি যে এটি এই গিটহাব রেপোতে এসভিজির চেয়ে দীর্ঘ পথ রফতানি করে । এফএ-গিফট আইকনটির তুলনা করার চেষ্টা করুন। path837 IcoMoon মাধ্যমে অক্ষর, বনাম হয় রেপো তে 514
ড্যান ড্যাসক্লেস্কু

খুব ভাল ড্যান ড্যানের এই ক্যাভিয়েট সম্পর্কে ধারণা ছিল না। তবুও, আমি আইকোমুনকে ভালবাসি।
সিআইএসআইএন


7

একটি নোড.জেএস টুলস রয়েছে যা এটি আপনার জন্য স্বয়ংক্রিয়ভাবে তৈরি করবে এবং এর আগে এবং পরে তৈরি করবে verify.htmlhttps://github.com/eugene1g/font-blast

আমি এটিকে অন্যান্য ফন্টে ব্যবহার করেছি, এখন পর্যন্ত কেবলমাত্র 1 টি খারাপ আইকন রূপান্তর, তবে এসভিজি ফন্টে বিশ্রামটি ঠিক ছিল।


4
আমি এটি চেষ্টা করে দেখতে যাচ্ছি
জন বিপজ্জনক

ফন্ট-বিস্ফোরণ সুপার দ্রুত এবং সহজ
00-BBB

4

আপনি কেবল এখানকার সর্বশেষতম সংস্করণটি ডাউনলোড করতে পারেন fa: https://fontawesome.com/

এবং তারপরে advanced-options/raw-svgফোল্ডারে যান। আপনি তিনটি ফোল্ডার আছে পাবেন brands, regularএবং solidসব সর্বশেষ আইকন প্রাপ্তিসাধ্য রয়েছে।



3

আপনি এগুলি এখানে ফ্ল্যাটিকন.কম থেকে ডাউনলোড করতে পারেন:

http://www.flaticon.com/packs/font-awesome


সহায়ক হতে পারে তবে আপনি যখন 512x512 থেকে 20x20 পর্যন্ত কোনও পথের আকার পরিবর্তন করতে চান তখন এর জন্য প্রচুর স্কেল-ডাউন বোতাম-
ম্যাশিং দরকার
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.