Увод у ХТМЛ СВГ
Употреба слика у ХТМЛ-у феноменална је за веб локације обогаћене мултимедијским садржајима. Све што требате учинити је додати ознаку у ХТМЛ код и виолу, прегледач ће приказати, па чак и додати везу до слике по вашем избору. Постаје мало забрињавајуће у ситуацијама у којима знате да ће се слика или дијаграм зумирати јер ЈПГ или ПНГ неће показати никакве даљње детаље након што се зумирају након што је разрешена. СВГ је решење за овај проблем. СВГ означава скалабилну векторску графику. Као што име сугерира, ове слике се могу зумирати онолико колико је потребно и детаљи никада не нестају. СВГ-ови нису ексклузивни за веб технологију, али бити у могућности да их користите у ХТМЛ-у заиста је лепо.
СВГ је користан за дијаграме, векторе, графиконе и графиконе у прегледачу. Научимо о томе како их можете детаљно користити овде.
Синтакса уградње СВГ у ХТМЛ
Слично као што је кориштење платна у ХТМЛ5, постоји једноставна ознака коју можете користити за уграђивање СВГ-а у ХТМЛ5 странице. Синтакса је следећа:
…. …. …. ….
Примери СВГ-ова у ХТМЛ-у
Сада, погледајмо неке примере вектора који се могу креирати и уклопити у ХТМЛ5:
Пример # 1 - Цртање правоугаоника преко СВГ-а у ХТМЛ-у
Шифра:
Sorry but this browser does not support inline SVG.
Излаз:
Пример # 2 - Цртање квадрата са заобљеним угловима у СВГ-у
За квадрат са заобљеним угловима мораћемо да одредимо радијус углова помоћу рк, осим величине и димензија квадрата.
Шифра:
Sorry but this browser does not support inline SVG.
Излаз:
Пример бр. 3 - Цртање круга у СВГ формату са обрисом и бојом у њему
Шифра:
Sorry but this browser does not support inline SVG.
Излаз:
Пример # 4 - Цртање равне линије са СВГ у ХТМЛ5
Ознаку можемо користити да цртамо равну линију у ХТМЛ5 СВГ форматима, може се дефинисати и боја, дебљина линије и положај истог.
Шифра:
Излаз:
Пример # 5 - Цртање помрачења путем СВГ-а у ХТМЛ5
Ознаку можемо да користимо за цртање помрчине у ХТМЛ5 СВГ-има, а боја и положај ње се могу дефинисати заједно са матрицом и њеним полумјером.
Шифра:
Sorry but this browser does not support inline SVG.
Излаз:
Пример бр. 6 - Креирање полигона са СВГ у ХТМЛ5
Ознака се може користити у СВГ-овима за креирање полигона. У ознаци од нас треба поменути положаје сваке тачке. Боје за пуњење, дебљина обриса итд. Могу се дефинисати и у коду.
Шифра:
Sorry but this browser does not support inline SVG.
Излаз:
Пример бр. 7 - Креирање полилинеа са СВГ у ХТМЛ5
Полилин се користи за цртање облика који ће се састојати само од равне линије. Имајте на уму да и ове линије морају бити повезане. Ево примера имплементације полилинеа у ХТМЛ5.
Шифра:
Sorry but this browser does not support inline SVG.
Излаз:
Пример бр. 8 - Цртање текста са СВГ у ХТМЛ5
Текст би могао бити потребан у било којем СВГ-у у многим ситуацијама, попут означавања графикона, итд. Срећом, у СВГ-у постоји ознака која се може користити. Текст се може подесити на било ком месту у СВГ-у и можете прилагодити његову боју и друге детаље.
Шифра:
Here is an example, it's very examply
Sorry but this browser does not support inline SVG.
Излаз:
Пример # 9 - Цртање звезде са СВГ у ХТМЛ5
Сада када смо завршили са основама, направимо звезду која ће бити направљена уз помоћ СВГ-а.
Шифра:
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.
Излаз:
Пример бр. 10 - Коришћење линеарног градијента у СВГ-у
Можете користити линеарни и радијални градијент у СВГ линији ХТМЛ платна. Градиент мора да се угнијезди у ознаку. Ова ознака је тада означена у СВГ ознаци да означи његову употребу. Погледајмо пример који користи Градиент у помрачењу.
Шифра:
Sorry but this browser does not support inline SVG.
Излаз:
Закључак
У случају локација на којима се користе дијаграми и графикони, СВГ-ови су спасилачки живот. Већина савремених веб прегледача такође подржава СВГ и осим што је скалабилан. Још једна предност коришћења СВГ-а је његова величина датотеке. Будући да је то само мало кода, СВГ-ови могу имати веома мали траг у потрошњи меморије и пропусног опсега у поређењу са традиционалним сликама.
Препоручени чланци
Ово је водич за ХТМЛ СВГ. Овде смо расправљали о уводу и првих 10 примера ХТМЛ СВГ са објашњењем и имплементацијом кода. Такође можете погледати следеће чланке да бисте сазнали више -
- Хтмл5 Нови елементи
- СВГ вс ЕПС
- ХТМЛ Блоцкс
- ХТМЛ Фрамес