એસવીજી અથવા સ્કેલેબલ વેક્ટર ગ્રાફિક્સ તમને વધુ જટિલ છબીઓ દોરવા દો અને વેબ પૃષ્ઠો પર રેન્ડર કરે છે. પરંતુ તમે ફક્ત એસવીજી ટેગ લઇ શકતા નથી અને તેમને તમારા HTML માં સ્લેપ કરી શકો છો. તેઓ દેખાશે નહીં અને તમારું પૃષ્ઠ અમાન્ય હશે. તેના બદલે, તમારે ત્રણમાંથી એક પદ્ધતિઓનો ઉપયોગ કરવો પડશે
એસવીજી એમ્બેડ કરવા માટે ઑબ્જેક્ટ ટેગનો ઉપયોગ કરો
HTML ટૅગ તમારા વેબ પૃષ્ઠમાં એસવીજી ગ્રાફિકને એમ્બેડ કરશે. તમે ઓબ્જેક્ટ ટૅગને એસવીજી ફાઇલને વ્યાખ્યાયિત કરવા માટે ડેટા એટ્રીબ્યુટ સાથે લખો કે જેને તમે ખોલવા માંગો છો. તમારી SVG છબી (પિક્સેલમાં) ની પહોળાઈ અને ઊંચાઈને વ્યાખ્યાયિત કરવા માટે તમારે પહોળાઈ અને ઊંચાઇના લક્ષણોનો સમાવેશ કરવો જોઈએ.
ક્રોસ-બ્રાઉઝર સુસંગતતા માટે, તમારે પ્રકાર એટ્રિબ્યૂટ શામેલ કરવું જોઈએ, જે વાંચવું જોઈએ:
પ્રકાર = "છબી / એસવીજી + xml"અને બ્રાઉઝર્સ માટે કોડબેઝ જે તેને સમર્થન આપતા નથી (Internet Explorer 8 અને નીચલા). તમારા કોડબેઝ એવા બ્રાઉઝર્સ માટે એસવીજી પ્લગઇનને નિર્દેશન કરશે જે SVG ને સપોર્ટ કરતા નથી. સૌથી વધુ ઉપયોગમાં લેવાતી પ્લગઇન એડોબથી છે http://www.adobe.com/svg/viewer/install/ જો કે, આ પ્લગિન હવે એડોબ દ્વારા સમર્થિત નથી બીજો વિકલ્પ http://www.savarese.com/software/svgplugin/ પર સવેવેરિસ સૉફ્ટવેર રિસર્ચમાંથી એસએસઆરસી એસવીજી પ્લગઇન છે.
તમારું ઑબ્જેક્ટ આના જેવું દેખાશે:
<ઑબ્જેક્ટ ડેટા = "રીક્ટાન્ગલ સ્વિસ" પહોળાઈ = "110" ઊંચાઈ = "60" પ્રકાર = "છબી / એસવીજી + xml" કોડબેઝ = "http://www.savarese.com/software/svgplugin/">SVG માટે ઓબ્જેક્ટનો ઉપયોગ કરવા માટેની ટિપ્સ
- ખાતરી કરો કે પહોળાઈ અને ઉંચાઇ તમે એમ્બેડ કરી રહ્યાં છો તે છબી જેટલી મોટી હોય છે. નહિંતર, તમારી છબી ક્લિપ થઈ શકે છે.
- જો તમારી પાસે સાચી સામગ્રી પ્રકાર (પ્રકાર = "છબી / એસવીજી + એક્સએમએલ") શામેલ ન હોય તો તમારું એસવીજી યોગ્ય રીતે પ્રદર્શિત નહીં કરી શકે, તેથી હું તેને છોડવા ભલામણ કરતો નથી.
- બ્રાઉઝર્સ માટે ઓબ્જેક્ટ ટૅગની અંદર તમે ફોલબેક માહિતી શામેલ કરી શકો છો જે SVG ફાઇલો પ્રદર્શિત કરશે નહીં.
- તમે પરિમાણોમાં તમારા SVG અને સામગ્રી પ્રકારનો સ્રોત પણ સેટ કરી શકો છો. આ IE 6 અને 7 માં વધુ સારું કામ કરી શકે છે:
નોંધ લો કે આને કામ કરવા માટે ક્લાડિડની જરૂર છે.
ઓબ્જેક્ટ ટૅગ ઉદાહરણમાં એસવીજી જુઓ.
એમ્બેડ ટેગ સાથે SVG એમ્બેડ કરો
એસવીજી શામેલ કરવા માટે તમારી પાસે બીજું વિકલ્પ ટેગનો ઉપયોગ કરવો. તમે પહોળાઈ <, ઊંચાઈ, પ્રકાર અને કોડબેઝ> સહિત ઓબ્જેક્ટ ટૅગના લગભગ સમાન લક્ષણોનો ઉપયોગ કરો છો. માત્ર એટલો જ તફાવત એ છે કે ડેટાને બદલે, તમે સ્રોત લક્ષણમાં તમારા SVG દસ્તાવેજ URL ને મૂકો છો.
તમારું એમ્બેડ આના જેવું દેખાશે:
src = "http://your-domain.here/z-circle.svg" પહોળાઈ = "210" ઊંચાઈ = "210" પ્રકાર = "છબી / એસવીજી + એક્સએમએલ" કોડબેઝ = "http://www.adobe.com / એસવીજી / દર્શક / ઇન્સ્ટોલ "/>એસવીજી માટે એમ્બેડ કરવા માટેની ટિપ્સ
- એમ્બેડ ટૅગ માન્ય HTML4 નથી, પરંતુ તે માન્ય HTML5 છે, તેથી જો તમે તેને HTML4 પૃષ્ઠમાં ઉપયોગ કરો છો, તો તમારે યાદ રાખવું જોઈએ કે તમારું પૃષ્ઠ માન્ય રહેશે નહીં.
- શ્રેષ્ઠ સુસંગતતા માટે સ્રોત એટ્રિએટમાં સંપૂર્ણ ક્વોલિફાઇડ ડોમેન નામનો ઉપયોગ કરો.
- એવી કેટલીક રિપોર્ટ્સ પણ છે કે જે એડોબ પ્લગઇન સાથે એમ્બેડ ટૅગનો ઉપયોગ કરીને મોઝિલા આવૃત્તિ 1.0 થી 1.4 પર તૂટી જશે.
એમ્બેડ ટૅગ ઉદાહરણમાં એક SVG જુઓ.
એસવીજી શામેલ કરવા માટે એક iframe નો ઉપયોગ કરો
Iframes એ તમારા વેબ પૃષ્ઠો પર એક SVG છબી શામેલ કરવાની બીજી સરળ રીત છે. તેને ફક્ત ત્રણ લક્ષણોની જરૂર છે: સામાન્ય રૂપે પહોળાઈ અને ઊંચાઈ, અને src એ તમારી એસવીજી ફાઇલના સ્થાન તરફ સંકેત કરે છે.
તમારા આઇફ્રામે આના જેવું દેખાશે: