এসভিজি কি বিটম্যাপ চিত্রগুলি এম্বেডিং সমর্থন করে?

147

কোনও এসভিজি চিত্রটি কি নিখুঁতভাবে ভেক্টোরিয়াল হয় বা আমরা কোনও এসভিজি চিত্রের সাথে বিটম্যাপ চিত্রগুলি একত্রিত করতে পারি? বিটম্যাপ চিত্রগুলিতে প্রয়োগ হওয়া রূপান্তরগুলি সম্পর্কে (দৃষ্টিকোণ, ম্যাপিংস ইত্যাদি)?

সম্পাদনা করুন : লিঙ্ক রেফারেন্স দ্বারা চিত্রগুলি কোনও এসভিজিতে অন্তর্ভুক্ত থাকতে পারে। Http://www.w3.org/TR/SVG/struct.html# আইজেমিলেট দেখুন । আমার প্রশ্নটি ছিল আসলে যদি বিটম্যাপ চিত্রগুলি এসভিজির মধ্যে অন্তর্ভুক্ত করা যায় যাতে এসভিজি চিত্রটি স্বয়ংসম্পূর্ণ থাকে। অন্যথায়, যখনই এসভিজি চিত্র প্রদর্শিত হবে লিঙ্কটি অবশ্যই অনুসরণ করা উচিত এবং চিত্রটি ডাউনলোড করা উচিত। স্পষ্টত .svg ফাইলগুলি কেবল এক্সএমএল ফাইল।

image  svg  bitmapimage 
— chmike
সূত্র

উত্তর:

207

হ্যাঁ, আপনি <image>উপাদান থেকে কোনও চিত্র উল্লেখ করতে পারেন । এবং আপনি এসভিজি সম্পূর্ণরূপে স্ব-সংযুক্ত করার জন্য ডেটা ইউরি ব্যবহার করতে পারেন । একটি উদাহরণ:

<image width="100" height="100" xlink:href="data:image/png;base64,...">

বিন্দুগুলি যেখানে আপনি এনকোডযুক্ত বেস 64 তথ্য যুক্ত করবেন, ভেক্টর গ্রাফিক্স সম্পাদকরা যা এসভিজি সমর্থন করে সাধারণত এমবেডেড চিত্রগুলির সাহায্যে সঞ্চয় করার বিকল্প থাকে। অন্যথায় বেস 64 এ এবং থেকে এনকোডিংয়ের জন্য প্রচুর সরঞ্জাম রয়েছে।

এখানে এসভিজি টেস্টুয়েটের একটি সম্পূর্ণ উদাহরণ ।

— এরিক ডাহলস্ট্রোম
সূত্র
2
@ আলেকসান্দার এটি একটি পৃথক প্রশ্ন, এবং আমি নিশ্চিত যে আপনি এটির জন্য এই সাইটে একটি উত্তর খুঁজে পেতে পারেন (বেস 64 তে কিছু এনকোডিং এসভিজি-নির্দিষ্ট নয়)।
— এরিক ডাহলস্ট্রমে
1
@ এরিক - মনে করুন আমার একই চিত্রটি একই এসভিজি ফাইলে হাজারবার পুনরাবৃত্তি হয়েছে। আমি কি বেস 64 ডেটা এক জায়গায় রাখতে পারি এবং সেখান থেকে চিত্রটিকে সেই ডেটা উল্লেখ করতে পারি?
— রোহিত ভ্যাটস 26:53
3
@ এরিক - কিছু মনে করবেন না আমি এখান থেকে আমার উত্তর পেয়েছি - stackoverflow.com/questions/16685014/… । উত্তর সেখানে গ্রুপিং সম্পর্কে আলোচনা। :)
— রোহিত ভ্যাটস
3
নাম xlinkxmlns:xlink="http://www.w3.org/1999/xlink"
— স্থানটি ঠিক তেমনভাবে
1
অবগতির জন্য: আমার অভিজ্ঞতা অনুযায়ী Chrome ব্রাউজার এই ছবিটি এমনকি যদি আপনি এখানে কিছু উল্লেখ না প্রদর্শন করে widthএবং heightSVG চিত্র ট্যাগে। তবে আপনি যদি এই বৈশিষ্ট্যগুলি বাদ দেন তবে ফায়ারফক্স এবং আইই চিত্রটি প্রদর্শন করবে না। সুতরাং নিশ্চিত করুন যে আপনি সেগুলি নির্দিষ্ট করেছেন!
— স্টোনক্রেশার
23

আমি এইচডিএমএল পৃষ্ঠার অভ্যন্তরে এসভিজিতে এম্বেড থাকা ডেটা, রিমোট এবং স্থানীয় চিত্রগুলি দেখিয়ে একটি ফিটল পোস্ট করেছি:

http://jsfiddle.net/MxHPq/

<!DOCTYPE html>
<html>
<head>
    <title>SVG embedded bitmaps in HTML</title>
    <style>

        body{
            background-color:#999;
            color:#666;
            padding:10px;
        }

        h1{
            font-weight:normal;
            font-size:24px;
            margin-top:20px;
            color:#000;
        }

        h2{
            font-weight:normal;
            font-size:20px;
            margin-top:20px;
        }

        p{
            color:#FFF;
            }

        svg{
            margin:20px;
            display:block;
            height:100px;
        }

    </style>
</head>

<body>
    <h1>SVG embedded bitmaps in HTML</h1>
    <p>The trick appears to be ensuring the image has the correct width and height atttributes</p>

    <h2>Example 1: Embedded data</h2>
    <svg id="example1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="0" width="5" height="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
    </svg>

    <h2>Example 2: Remote image</h2>
    <svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="0" width="275" height="95" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png" />
    </svg>

    <h2>Example 3: Local image</h2>
    <svg id="example3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image x="0" y="0" width="136" height="23" xlink:href="/img/logo.png" />
    </svg>


</body>
</html>
— davestewart
সূত্র
17

চিত্রের ডেটা সরবরাহ করতে আপনি কোনও ডেটা ইউআরআই ব্যবহার করতে পারেন , উদাহরণস্বরূপ:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<image width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>

</svg>

চিত্রটি সমস্ত সাধারণ এসভিজি রূপান্তরগুলির মধ্য দিয়ে যাবে।

তবে এই কৌশলটির অসুবিধাগুলি রয়েছে, উদাহরণস্বরূপ ব্রাউজার দ্বারা চিত্রটি ক্যাশে করা হবে না

— GarethOwen
সূত্র
যদি এসভিজি দ্বারা ডেটা ইউআরআই প্রয়োজন হয়, তবে এটি সম্ভবত কোনও অসুবিধা নয় - আমি আমার উত্তরটি সম্পাদনা করব
— গ্যারেথউইন
এম্বেড করা চিত্রগুলি (ডেটা ইউআরআই) তারা যে দস্তাবেজে রয়েছে তার সাথে ক্যাশে হবে, উদাহরণস্বরূপ দেখুন স্ট্যাকওভারফ্লো
— এরিক ডালস্ট্রোম
ঠিক যেমন - এসভিজি ডকুমেন্ট পরিবর্তন হয় তবে এম্বেড বিটম্যাপটি একই হয়ে গেলেও পুনরায় লোড করা হবে। যদি আমরা কোনও HTTP ইউআরএল লিঙ্ক করি তবে এসভিজি নথিতে এটি আলাদাভাবে ক্যাশে করা যায়।
— গ্যারেথউইন
1
ভাল যুক্তি. নিকের উত্তরের আমার মন্তব্যে আপনি এসভিজি চিত্রের বিটম্যাপ চিত্রটি এম্বেড করার যুক্তি দেখবেন। যদিও আপনি ঠিক বলেছেন, এনকোডিংটি খারাপ এবং অদক্ষ। এটি একটি পৃথক বাইনারি এনকোডযুক্ত ফাইল হওয়া উচিত যা এসভিজি চিত্রের সাথে সরানো হয়েছিল।
— chmike
2

আপনি একটি চিত্রের একটি বেস 64 এনকোড সংস্করণ এম্বেড করতে একটি data:URL ব্যবহার করতে পারেন । তবে এটি খুব দক্ষ নয় এবং বৃহত চিত্রগুলি এম্বেড করার পরামর্শ দেয় না। অন্য কোনও ফাইলের সাথে সংযোগ স্থাপনের কোনও কারণ কি সম্ভব নয়?

— শুভক্ষণ
সূত্র
এটি নির্ভর করে ব্যবহারের ক্ষেত্রে। আমি যে ব্যবহারের ক্ষেত্রে বিবেচনা করছি তা হ'ল যেখানে একটি এসভিজি ফাইল অনুলিপি করা থাকে এবং ইন্টারনেট অ্যাক্সেস সবসময় পাওয়া যায় না (অর্থাত্ ব্যবসায়িক কার্ড)। আইটি কার্ডের ব্যবহার ব্যক্তিগত রাখতেও সহায়তা করে। কোনও লিঙ্কযুক্ত চিত্রের সাথে, চিত্রটির মালিক তার কার্ডগুলির সমস্ত প্রদর্শনগুলি ট্র্যাক করতে পারে যা কার্ড কার্ড ধারকের জন্য তার জন্য আকর্ষণীয় হতে পারে তবে be স্ব অন্তর্ভুক্ত এসভিজি চিত্রটি বুদ্ধিমান।
— chmike
আপনি যদি ইন্টারনেটের কোথাও নির্দেশ করে একটি নিখুঁত URL ব্যবহার করেন তবে এটি সত্য। তবে আপেক্ষিক ইউআরএল ব্যবহার করা সহজ, যাতে এসভিজি ফাইলটি স্থানীয় হয়, তবে চিত্রটিও খুব ভাল। আপনার যদি এটিরও প্রয়োজন হয় যে এটি একক পুনরায় বিতরণযোগ্য ফাইল হতে হবে, তবে এটি আবার জিনিসগুলিকে পরিবর্তন করে।
— নিক
আপনি যেখানে কোনও এসভিজি গ্রাফিককে নিজের মধ্যে অন্তর্ভুক্ত রাখতে চান সেখানে ব্যবহারের ক্ষেত্রে রয়েছে - এটি হ'ল সম্পূর্ণ চিত্রযুক্ত এক ফাইল। কোনও চিত্রের রেন্ডারিং হয়েছে তা নিশ্চিত করার জন্য একাধিক ফাইল পরিবহণ / সঞ্চয় করা ফাইল ফাইল সিস্টেমে চিত্রগুলি পরিচালনা করার সময় ভাল জিনিস নয় - জিনিসগুলি সিঙ্কের বাইরে চলে যেতে পারে বা খুব সহজেই নামতে পারে।
— মিনোক
-1

বিটম্যাপ অন্তর্ভুক্ত করাও সম্ভব। আমি মনে করি আপনি এটিতে রূপান্তরগুলিও ব্যবহার করতে পারেন।

— mightyplow
সূত্র
প্রকৃতপক্ষে. আমি এই লিঙ্কটি সবেমাত্র পেয়েছি: w3.org/TR/SVG/struct.html# আইজেমমেন্ট । দুর্ভাগ্যক্রমে এটি আমার উদ্বেগের উত্তর দেয় না যা আমি লক্ষ্য করেছি যে প্রশ্নটিতে বলা হয়নি। আমি প্রশ্নটি সম্পাদনা করব।
— chmike
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.