<img> ট্যাগের মাধ্যমে ক্রোম SVG রেন্ডার করে না

Question 1

আমি গুগল ক্রোমে কোনও ইমগ ট্যাগ দিয়ে এসভিজি রেন্ডার না করায় সমস্যা রয়েছে। পৃষ্ঠাটি এবং প্রাথমিক পৃষ্ঠা লোডটি রিফ্রেশ করার সময় এটি ঘটে। আমি "পরিদর্শন উপাদানটি" এরপরে এসভিজি ফাইলটিতে ডান ক্লিক করে এবং নতুন ট্যাবে এসভিজি ফাইলটি খোলার মাধ্যমে চিত্রটি প্রদর্শন করতে পারি। এসভিজি চিত্রটি তখন মূল পৃষ্ঠায় রেন্ডার হবে।

<img src="../images/Aged-Brass.svg">

সমস্যাটি কী তা এখানে পুরোপুরি লোকসানে। এসভিজি চিত্রটি কেবল ক্রোম বা সাফারিতে নয়, আই 9 এবং এফএফ এ জরিমানা করে।

আমার মাইমে টাইপগুলিও সেট করা আছে। (চিত্র / এসভিজি + এক্সএমএল)

সম্পাদনা: এখানে একটি সহজ এইচটিএমএল পৃষ্ঠা যা আমি আমার সমস্যাটি চিত্রিত করতে সহায়তা করেছিলাম built

<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>

    <style>
        #BackgroundImage{
            background: url('../images/Aged-Brass.svg') no-repeat scroll left top;
            width: 400px;
            height: 600px;
        }

        #ImageTag{
            width: 400px;
            height: 600px;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="ImageTag">
        <img src="../images/Aged-Brass.svg">
    </div>
    <div id="BackgroundImage"></div>
</body>
</html>

আপনি দেখতে পাচ্ছেন যে আমি একটি এমএমজি ট্যাগ এবং সিএসএস উভয় ক্ষেত্রে একটি ব্যাকগ্রাউন্ড চিত্র হিসাবে একটি এসভিজি ফাইল ব্যবহার করার চেষ্টা করছি। ক্রোম বা সাফারিতে প্রাথমিক পৃষ্ঠা লোড নিয়ে কোনও কাজ করবেন না। আমি যখন উপাদানটি রাইট ক্লিক করে এসভিজি পরিদর্শন করি বা অন্য উইন্ডোতে এসভিজি লোডের লিঙ্কে ক্লিক করি তখন এসভিজি ফাইলটি মূল ট্যাবে রেন্ডার হবে।

Question 2

একটি সহজ এবং সহজ উপায়; https://css-tricks.com/forums/topic/svg-css-background-image-not-showing-in-chrome/ অনুসারে আপনাকে .SVG ফাইলটি একটি পাঠ্য সম্পাদক (নোটপ্যাডের মতো) দিয়ে খুলতে হবে এবং পরিবর্তন করতে হবে

xlink:href="data:img/png;base64,

প্রতি:

xlink:href="data:image/png;base64,

এটা আমার জন্য কাজ!

Question 3

এসভিজি-ট্যাগের নামের স্থানের বৈশিষ্ট্য xmlns প্রয়োজন:

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

Question 4

আমি এখানে এসেছি কারণ আমার একই সমস্যা ছিল, যখন আমি উপাদানটি পরিদর্শন করি তখন আমি ফাইলটি দেখতে পারি, তবে যে সাইটে আমি পারি না (লোকালহোস্ট ব্যবহার করার সময়ও)

আমার সমস্যার উত্তরটি ছিল এসভিজি ফাইলটি সংরক্ষণ করা। আপনি যদি এটি চিত্রকরকের কাছ থেকে সংরক্ষণ করেন তবে নিশ্চিত করুন যে 'এম্বেড করুন' এবং 'লিঙ্কে' ক্লিক করবেন না। লিঙ্কটি ডেটা অন্তর্ভুক্ত না করে কেবল আপনার স্থানীয় ফাইলগুলিকে উল্লেখ করবে (যদি আমি এটি সঠিকভাবে বুঝতে পারি)। এখানে চিত্র বর্ণনা লিখুন

আমি Adobe ওয়েবসাইট যা রপ্তানির জন্য অন্য কিছু দরকারী টিপস রয়েছে তে এটি সম্পর্কে পড়তে http://www.adobe.com/inspire/2013/09/exporting-svg-illustrator.html

এটি আমার পক্ষে কাজ করেছে, আশা করি এটি কার্যকর ছিল।

Question 5

আমি এখানে এসেছি কারণ আমার অনুরূপ সমস্যা ছিল, চিত্রটি রেন্ডার করা হচ্ছিল না। আমি যা জানতে পেরেছিলাম তা হল আমার পরীক্ষার সার্ভারের সামগ্রী টাইপ শিরোনামটি সঠিক ছিল না। আমি আমার .htaccess ফাইলে নিম্নলিখিতটি যুক্ত করে এটি ঠিক করেছি:

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Question 6

<object>পরিবর্তে ব্যবহার করুন (অবশ্যই প্রতিটি ইউআরএল আপনার নিজের সাথে প্রতিস্থাপন করুন):

.BackgroundImage {
        background: url('https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg') no-repeat scroll left top;
        width: 400px;
        height: 600px;
}

<!DOCTYPE html>
<html>
<head>
    <title>SVG Test</title>
</head>
<body>
    <div id="ObjectTag">
        <object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/b/bd/Test.svg" width="400" height="600">
          Your browser does not support SVG.
        </object>
    </div>
    <div class="BackgroundImage"></div>
</body>
</html>

স্নিপেট প্রসারিত করুন

Question 7

[এসভিজি] ট্যাগটিতে প্রস্থের বৈশিষ্ট্য যুক্ত করা (এসভিজি উত্স এক্সএমএল সম্পাদনা করে) আমার পক্ষে কাজ করেছে: যেমন:

<!-- This didn't render -->
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
...  
</svg>

<!-- This did -->
<svg version="1.1" baseProfile="full" width="1000" xmlns="http://www.w3.org/2000/svg">
...  
</svg>

Question 8

আমি একটি পরীক্ষার পৃষ্ঠা তৈরি করতে আপনার নমুনাটি ব্যবহার করতে সক্ষম হয়েছি এবং এটি ঠিক কাজ করেছে। আমার অনুমান যে আপনার এসভিজি ফাইলটিতে কিছু ভুল আছে। আপনি কি এখানে এখানে আটকান করতে পারেন? আমি ব্যবহৃত নমুনা এখানে।

 <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
   <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
   <g>
      <title>Layer 1</title>
      <ellipse ry="30" rx="30" id="svg_1" cy="50" cx="50" stroke-width="5" stroke="#000000" fill="#FF0000"/>
   </g>
 </svg>

Question 9

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

সুতরাং আমি যা করেছি তা ছিল: ১. স্ক্রিনের আকারের জন্য পরীক্ষা করুন my আমার এসভিজি অবজেক্টের "লোড" ইভেন্টটি শুনুন the. উপাদানটি লোড হয়ে গেলে আমি jQuery ব্যবহার করে এর সিএসএস পরিবর্তন করি it এটি আমার জন্য কৌশলটি করেছিল

if (jQuery(window).width() < 769) {

  jQuery('object#mysvg-logo')[0].addEventListener('load', function() {
       jQuery("object#mysvg-logo").css('width','181px');
  }, true);

}

width: 180px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<object id="mysvg-logo" type="image/svg+xml" data="my svg logo url here">Your browser does not support SVG</object>

স্নিপেট প্রসারিত করুন

Question 10

আমার অনুরূপ সমস্যা ছিল এবং এর বিদ্যমান উত্তরগুলি হয় হয় প্রযোজ্য নয়, বা কাজ করা হয়েছিল তবে আমরা অন্যান্য কারণে সেগুলি ব্যবহার করতে পারি নি। সুতরাং ক্রোম আমাদের এসভিজিগুলি সম্পর্কে কী অপছন্দ করেছিল তা আমাকে খুঁজে বের করতে হয়েছিল।

আমাদের ক্ষেত্রে এটি প্রমাণিত হয়েছিল যে এসভিজি ফাইলে ট্যাগটির idবৈশিষ্ট্যের মধ্যে symbolএকটি :রয়েছে যা ক্রোম পছন্দ করে না। যত তাড়াতাড়ি আমি :এটি সরান কাজ।

খারাপ:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="ThisIDHasAColon:AndChromeDoesNotLikeIt">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#ThisIDHasAColon:AndChromeDoesNotLikeIt"
    />
</svg>

ভাল:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72">
    <defs>
        <symbol id="NoMoreColon">
        ...
        </symbol>
    </defs>
    <use
        ....
        xlink:href="#NoMoreColon"
    />
</svg>

Question 11

.svgচিত্রটির প্রাথমিক উচ্চতা এবং প্রস্থ নেই। অতএব এটি দৃশ্যমান নয়। আপনি সেট করতে হবে।

আপনি লাইন অথবা সিএসএস ফাইলে যা করতে পারেন:

সারিতে:

<img src="../images/Aged-Brass.svg" class="image" alt="logo" style="width: 100px; height: 50px;">

CSS ফাইল:

<img src="../images/Aged-Brass.svg" class="image" alt="logo">

.image {
    width: 100px;
    height: 50px;
}

Question 12

আমার ক্ষেত্রে যখন আমি ফটোশপ ব্যবহার করে এসভিজি তৈরি এবং সংরক্ষণ করি তখন এই সমস্যাটি থেকেই যায়। যা সাহায্য করেছিল তা হল ইলাস্ট্রেটর ব্যবহার করে ফাইলটি খুলতে এবং এসভিজি রফতানি করার পরে।

Question 13

আমি প্রাথমিকভাবে ফটোশপ সিসি থেকে আমার এসজিজি রফতানি করেছি এবং ম্যানুয়ালি যোগ করতে হয়েছিল

version="1.1"মধ্যে <svg>ট্যাগটি

এটি ক্রোমে প্রদর্শিত হচ্ছে।

Question 14

সার্ভার থেকে এইচটিটিপি শিরোনামে সামগ্রীর ধরণটি আমার জন্য সমস্যা ছিল। আমার একটি নোড.জেএস সার্ভার রয়েছে, যোগ করা হয়েছে:

if( pageName.substring(pageName.lastIndexOf('.')) == '.svg' ) {
  res.writeHead(200, { "Content-Type": "image/svg+xml" });
}

অনুরোধ করা হয় তার জন্য পেজনামটি আমার স্থানীয় পরিবর্তনশীল।

আমার ধারণা এটি একটি সাধারণ সমস্যা! Chrome এর বর্তমান সংস্করণটি ব্যবহার করছি (মার্চ 2020)।

Question 15

একই সমস্যা ছিল। যদি সার্ভারটি সঠিকভাবে কনফিগার করা থাকে এবং .htacces এর উত্তর না হয় তবে আপনি এমবেডিং করা এসভিজি উত্সটি দেখতে চাইতে পারেন। আমার পাঠ্য সম্পাদক দিয়ে তৈরি করা হয়েছে, এইচটিএমএল 5 কোডের মধ্যে ক্রোম এবং সাফারিতে ভাল রেন্ডার করা হয়েছে, একবার এমবেড করা থাকলে কিছুই দৃশ্যমান ছিল না। এসভিজি কোডে সঠিক সংস্করণ, মাত্রা ইত্যাদি যুক্ত করা হয়েছে এবং একটি কবজির মতো কাজ করে। এছাড়াও, সমস্ত শৈলীর ইনলাইন।

অর্থাৎ

<svg version="1.1" baseProfile="full" width="24" height="24" xmlns="http://www.w3.org/2000/svg"> 
  <rect x="0" y="0" rx="2" ry="2" width="24" height="24" style="fill:#fbc800;width:24px;height:24px;"  />  
</svg>

Question 16

ক্রোমের সাথেও একই সমস্যাটি পেয়েছিলাম, যোগ করার পরে DOCTYPEএটি প্রত্যাশার সাথে কাজ করে

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

আগে

    <?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>

পরে

    <?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="792px" height="792px" viewBox="0 0 792 792" style="enable-background:new 0 0 792 792;" xml:space="preserve">
    <g fill="none" stroke="black" stroke-width="15">
  ......
  ......
  .......
  </g>
</svg>

Question 17

সতর্কতা অবলম্বন করুন যে আপনার কাছে এসভিজি চিত্রগুলির জন্য ট্রানজিশন সিএসএস সম্পত্তি না রয়েছে

আমি এখনই তা করি না, তবে আপনি যদি এটি করেন: "সংক্রমণ: সমস্ত স্বাচ্ছন্দ 0.3s" ক্রোমের এসভিজি চিত্রের জন্য চিত্রগুলি উপস্থিত হয় না

যেমন:

* {
   transition: all ease 0.3s
  }

ক্রোম এসজিজি রেন্ডার করে না।

কোনও রূপান্তর সিএসএস সম্পত্তি সরান এবং আবার চেষ্টা করুন

Question 18

সমস্যাগুলিতে এসভিজি-চিত্রগুলি পড়তে সক্ষম এমন কোনও প্রোগ্রামের মাধ্যমে প্রথমে চিত্রগুলি খোলার চেষ্টা করুন।
যদি এটি ব্যর্থ হয়, তবে এসভিজি-চিত্রটি কোনওভাবে দূষিত হয়।

আমার সেই কেসটি ছিল এবং একটি নতুন এসভিজি-ইমেজে এসভিজি-পাথগুলি অনুলিপি করে এবং এসভিজি-ট্যাগগুলির সমস্ত বিবরণ সামঞ্জস্য করে।

আমি কখনই এটির রেন্ডারিংয়ের কারণটি পরীক্ষা করিনি তবে মনে করুন যে কিছু অদৃশ্য বিশেষ লক্ষণগুলি রেন্ডার-ত্রুটির কারণ হয়েছিল। কখনও কখনও ম্যাকে ফাইল সম্পাদনা করা অন্যান্য সমস্যাতে ইতিমধ্যে আমার এই সমস্যাটি ছিল।

Question 19

আইএমজি ট্যাগের মাধ্যমে অন্তর্ভুক্ত একটি এসভিজি চিত্র নিয়ে আমার একই সমস্যা ছিল। এটি আমার পক্ষে প্রমাণিত হয়েছিল যে ক্রোম সরাসরি ফাইলের শীর্ষে একটি ফাঁকা লাইন থাকা পছন্দ করে না।

আমি ফাঁকা লাইনটি সরিয়েছি এবং আমার এসভিজি তত্ক্ষণাত রেন্ডারিং শুরু করে।

Question 20

আমি নিশ্চিত করেছি যে আমি চিত্রের স্টাইল যুক্ত করেছি । এটা আমার জন্য কাজ করেছে

style= "width:320; height:240"

Question 21

Just replace <img> tag to <object> tag for SVG image.

<object data="assets/twitter-wrap.svg" type="image/svg+xml"></object>