Калі вы ў стане ігнараваць Internet Explorer, усе іншыя асноўныя браўзар можа зрабіць SVG-змесціва. Нядаўна, падчас запісу папярэдняга паведамлення і webapps, я выявіў некалькі дзівацтваў, якія могуць прывесці да збою браўзара для адлюстравання SVG утрыманне паслядоўна.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using SVG inline in an XHTML document</title>
</head>
<body>
<h1>Using SVG inline in an XHTML document</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250"
style="border: 1px solid black">
<circle fill="rgb(250, 160, 20)"
cx="100" cy="50" r="80" />
<rect fill="rgb(20, 250, 20)" fill-opacity="0.6"
x="35" y="85" width="180" height="85" />
</svg>
</body>
</html>
Адкрыць гэты прыклад у браўзары.
Inline SVG з'яўляецца прывабным варыянтам, паколькі яна не патрабуе вонкавага файла. Нажаль, убудаваны SVG мае адну сур'ёзную праблему: аўтары змушаны выкарыстоўваць XHTML і application/xhtml+xml MIME тып, замест стандартнага HTML і text/html тыпу MIME. XHTML не прабачае мове, а адзін я, як правіла, перашкаджаць. У залежнасці ад сродкаў распрацоўкі і іншае змесціва на старонцы, вырабляць сапраўдны XML можа быць цяжкім. Яшчэ больш праблематычным з'яўляецца тое, што Internet Explorer будзе адмовіцца, каб адлюстраваць старонку на ўсіх, няма вытанчаны абыходнай шлях для большасці браўзараў. Нарэшце, синдикации SVG у кормах часта будзе выклікаць SVG пазбавіць як гэта сіндыкаваных.
Я выкарыстоўваў убудаваны SVG для маёй Mozilla кампілятар пярэдняга папярэджання , таму што я не хвалюе карыстачоў Інтэрнэт Explorer у гэтай заяўцы. Але ён мае вельмі абмежаваную карыснасць у цэлым.
На першы погляд, можа здацца, што вы маглі б спасылкі SVG-дакумента з выкарыстаннем HTML <: IMG>. Элемента, але гэта не так. SVG малюнкі поўнага суб-дакументаў. Яны маюць свой уласны кантэкст сцэнар і сцэнар можа сябе. Яны таксама могуць загружаць дадатковыя суб-дакументаў, такіх як малюнкі. З-за гэтага, браўзары сілу аўтарам устаўляць малюнкі SVG выкарыстаннем <object> ці <iframe>.
<object> Элемент агульнага механізму HTML для ўбудавання вонкавых дадзеных. Яна можа быць скарыстана як для вонкавых <iframe> дакумента HTML. Ён можа быць скарыстаны для ўкаранення ўбудова-адлюстроўванае змесціва, такіх як Flash, і ён можа быць скарыстаны для ўбудавання SVG:
<object type="image/svg+xml"
data="http://benjamin.smedbergs.us/blog/wp-content/uploads/2008/12/svg-document1.svg"
width="250" height="250">
Alternate markup here. If you see this, your browser may not support SVG, or a content aggregator may have stripped the object element.
</object>
Элемента аб'екта з'яўляецца лепшым выбарам у большасці сітуацый. Усе браўзары, уключаючы Internet Explorer будзе адлюстроўваць рэзервовы ўтрыманне, калі яны не ведаюць, як для адлюстравання SVG ці калі малюнак не загружаецца. Выкарыстанне элементаў аб'екта, аўтары могуць нават перадаваць параметры дакумента SVG.
Акрамя таго, можна ўключыць SVG-змесціва з дапамогай <iframe> элемента.
<iframe width="350" height="250"
src="http://benjamin.smedbergs.us/blog/wp-content/uploads/2008/12/svg-document1.svg">
Alternate markup here. If you see this, your browser might not support iframes, or a content aggregator might have stripped the iframe element.
</iframe>
Ёсць невялікія, але важныя адрозненні выкарыстаннем IFRAME, а не аб'ект для адлюстравання SVG: Internet Explorer будзе загружаць IFRAME але ў шоку ад утрымання SVG. Карыстач не прапусціць зваротна ў рэзервовы ўтрыманні ў <iframe> элемент, а ў некаторых выпадках карыстач можа ўбачыць запампаваць запытае дакумент SVG. Але шматлікія якія дэзінфікуюць кантэнт, такі як тыя, што ў кормы агрэгатары дазволіць <iframe> шляхам, адпрэчваючы <object> І, нарэшце, маюць плывучыя фрэймы мяжы па змаўчанні. Вы можаце выдаліць гэту мяжу з дапамогай CSS.
image/svg+xml Правільны тып MIME для змесціва SVG з'яўляецца image/svg+xml. Firefox будзе прымаць application/svg+xml , але Safari не будзе!
Аўтар павінен ведаць памеры малюнка ў загадзя. Калі не паказаць шырыню і вышыню ў элемент <object> ці <iframe>, браўзары першапачаткова памер аб'екта на 300 ? 150 пікселяў, а затым іх паводзіны будзе разыходзіцца:
| <object> | <iframe> | |
| Firefox | Маштабаванне малюнка ўласнага памеру, пасля пагрузкі | Вылучыце перапаўненні ўтрыманне |
| Opera | ||
| Safari | Раслінаводства перапаўнення ўтрыманне | |
| Прыклад |
| |
CSS3 спецыфікацыя дазваляе любога колеру, каб быць паказаны з выкарыстаннем празрыстасці RGBA сінтаксісу. Шматлікія вэб-браўзараў падтрымкі RGBA кветак для ўтрымання HTML, але толькі ў Firefox падтрымлівае іх для SVG-змесціва. Замест выкарыстання RGBA кветак, выкарыстанне SVG уласцівасці fill-opacity і stroke-opacity для максімальнай мабільнасці.
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="100">
<circle fill="rgb(180, 180, 250)"
cx="100" cy="20" r="85" />
<text x="10" y="45" font-size="40" fill="rgba(0, 0, 0, 0.3)">rgba transparent text?</text>
<text x="10" y="95" font-size="40" fill="black" fill-opacity="0.3">use fill-opacity instead!</text>
</svg>
Popular Links