Koncept vektorskih slik za ogromno število navadnih uporabnikov računalnikov ne govori ničesar. Oblikovalci pa so vedno bolj nagnjeni k uporabi te vrste grafike za svoje projekte.

Prej, za delo s SVG-slikami, bi morali namestiti eno od specializiranih namiznih rešitev na vašem računalniku Adobe Illustrator ali Inkscape . Zdaj so ta orodja na voljo na spletu brez potrebe po prenosu.

Preberite tudi: Učenje, kako pripraviti Adobe Illustrator

Kako delati s SVG na spletu

Z izpolnitvijo ustrezne poizvedbe v Googlu lahko vidite ogromno število vseh vrst vektorskih spletnih urednikov. Toda velika večina takšnih rešitev ponuja precej skromne priložnosti in najpogosteje ne dovoljuje dela z resnimi projekti. Pregledali bomo najboljše storitve za ustvarjanje in urejanje slik SVG v brskalniku.

Seveda pa spletna orodja ne morejo v celoti nadomestiti ustreznih namiznih aplikacij, vendar bo večina uporabnikov predlaganega nabora funkcij več kot dovolj.

Metoda 1: Vectr

Dobro premišljen urednik vektorjev ustvarjalcev znane Pixlr storitve. To orodje bo koristno za začetnike in izkušene uporabnike pri delu s SVG.

Kljub številnim funkcijam se bo težko izgubiti v Vectr vmesniku. Za začetnike so na voljo podrobna navodila in obširna navodila za vsako od komponent storitve. Med orodji urednika obstaja vse za ustvarjanje SVG-slik: oblike, ikone, okvirji, sence, ščetke, podpora za delo s sloji itd. Sliko lahko narišete iz nič ali naložite svojo.

Spletna storitev Vectr

  1. Preden začnete uporabljati vir, je zaželeno, da se ga prijavite z eno od razpoložljivih socialnih omrežij ali pa ustvarite račun na spletnem mestu od nič.
    Okno avtorizacije v Vectr
    To vam ne omogoča le prenos rezultatov vašega dela na računalnik, ampak kadar koli shranite spremembe v "oblaku".
  2. Vmesnik storitve je čim bolj preprost in preprost: na levi strani platna so na voljo orodja, in na desni - variabilne lastnosti vsakega od njih.
    Delovni vmesnik urejevalnika spletnega vektorja Vectr
    Podpira ustvarjanje več strani, za katere obstajajo dimenzijske predloge za vse okuse - od grafičnih naslovov v socialnih omrežjih, do standardnih formatov.
  3. Izvoz končane slike s klikom na puščični gumb v menijski vrstici na desni.
    Izvozite sliko SVG iz Vectr
  4. V oknu, ki se odpre, določite zagonske parametre in kliknite »Prenos« .
    Izvozno okno SVG iz storitve Vectr

Ena od najbolj značilnih lastnosti Vectr je podpora izvoznim možnostim: podpora za neposredne povezave s projektom SVG v urejevalniku. Mnogi viri vam ne dovoljujejo neposredno prenašati vektorskih slik, temveč omogočajo njihovo oddaljeno prikazovanje. V tem primeru se lahko Vectra uporabi kot resnično gostovanje SVG, ki ga druge storitve ne dovolijo.

Treba je opozoriti, da urejevalnik praviloma vedno ne obravnava zahtevne grafike. Zaradi tega se lahko nekateri projekti v Vectrju odpirajo z napakami ali vizualnimi artefakti.

2. način: Sketchpad

Preprost in priročen spletni urejevalnik za ustvarjanje SVG-slik, ki temelji na platformi HTML5. Glede na nabor razpoložljivih orodij je mogoče trditi, da je storitev namenjena izključno risanju. Z Sketchpad lahko ustvarite čudovite, skrbno oblikovane slike, vendar ne več.

Orodje ima široko paleto prilagodljivih ščetk različnih oblik in vrst, sklop oblik, pisav in nalepk za prekrivno površino. Urejevalnik vam omogoča, da v celoti ravnate s plasti - za nadzor njihovih načinov umestitve in mešanja. No, kot bonus, je vloga v celoti prevedena v rusko, tako da ne bi smeli imeti težav s svojim razvojem.

Sketchpad Online Service

  1. Vse, kar potrebujete za delo z urednikom, je brskalnik in dostop do omrežja. Mehanizem odobritve na spletnem mestu ni zagotovljen.
    Vmesnik spletnega vektorskega grafičnega urejevalnika Sketchpad
  2. Če želite končano sliko prenesti v računalnik, v menijski vrstici na levi strani kliknite ikono diskete in v pojavnem oknu izberite želeno obliko.
  3. Prenesite že pripravljeno SVG-sliko iz spletnega urejevalnika Sketchpad

Po potrebi lahko nezaščiteno risbo shranite kot projekt Sketchpad in ga kadar koli dokončate.

Metoda 3: Metoda Draw

Ta spletna aplikacija je namenjena osnovnim operacijam z vektorskimi datotekami. Zunaj je orodje podobno namizju Adobe Illustrator, vendar je tukaj glede na funkcionalnost veliko preprostejše. Vendar pa je v Draw Methodu nekaj funkcij.

Poleg dela s slikami SVG urejevalnik vam omogoča uvoz rastrskih slik in ustvarjanje vektorja na njih. To lahko storite tako, da ročno sledite izrisom s pisalom. Aplikacija vsebuje vsa potrebna orodja za sestavljanje vektorskih risb. Obstaja razširjena knjižnica s številkami, barvna paleta in podpora za bližnjične tipke.

Metoda spletne storitve

  1. Vir ne zahteva, da se uporabnik registrira. Pojdite na spletno stran in delajte z obstoječo vektorsko datoteko ali ustvarite novo.
    Delovni vmesnik spletnega urejevalnika vektorske grafike Metoda Draw
  2. Poleg ustvarjanja fragmentov SVG v grafičnem okolju lahko tudi urejate sliko neposredno na ravni kode.
    Urejanje slike SVG na ravni kode v Metodi Draw
    Če želite to narediti, pojdite na »Pogled« - »Vir ...« ali uporabite bližnjico na tipkovnici »Ctrl + U« .
  3. Ko končate delo na sliki, jo lahko takoj shranite v računalnik.
  4. Prenesite SVG-sliko v računalniku s storitvijo Method Draw
    Če želite izvoziti sliko, odprite postavko »Datoteka« in kliknite »Shrani sliko ...« . Ali pa uporabite bližnjico "Ctrl + S" .

Metoda Draw zagotovo ni primerna za ustvarjanje resnih vektorskih projektov - razlog je pomanjkanje ustreznih funkcij. Ampak zaradi odsotnosti nepotrebnih elementov in kompetentno organiziranega delovnega prostora, lahko storitev popolnoma služi za hitro urejanje ali piko prilagajanje preprostih SVG slik.

Metoda 4: Gravit Designer

Brezplačna grafična vektorska grafika za napredne uporabnike. Mnogi oblikovalci so Gravit uvrstili na enak način kot polnopravne namizne rešitve, kot je isti Adobe Illustrator. Dejstvo je, da je to orodje navzkrižno platformo, to je, da je v celoti na voljo v vseh računalniških operacijskih sistemih, pa tudi kot spletna aplikacija.

Gravit Designer je v aktivni fazi razvoja in redno sprejema nove funkcije, ki so že dovolj za kompleksne projekte.

Gravit Designer Online Service

Urejevalnik vam ponuja vse vrste orodij za risanje konture, oblike, poti, prekrivne z besedilom, polnila in različne učinke po meri. Obstaja velika knjižnica številk, tematskih slik in ikon. Vsak element v prostoru Gravit ima seznam lastnosti, ki so na voljo za spremembo.

Urejanje slike predloge v spletni storitvi Gravit Designer

Vse te sorte so pakirane v eleganten in intuitiven vmesnik, tako da je vsako orodje dobesedno na voljo v nekaj klikih.

  1. Če želite začeti z urejevalnikom, vam ni treba ustvariti računa v storitvi.
    Registriramo se v spletni storitvi Gravit Designer
    Če pa želite uporabiti že pripravljene predloge, boste morali ustvariti brezplačen račun za Gravit Cloud.
  2. Če želite ustvariti nov projekt iz nič v oknu dobrodošlice, pojdite na zavihek "Novo oblikovanje" in izberite želeno velikost platna.
    Ustvarite nov projekt v spletnem urejevalniku SVG Gravit Designer
    V skladu s tem za delo s predlogo odprite razdelek »Novo iz predloge« in izberite želeno obdelovanco.
  3. Gravit lahko samodejno shrani vse spremembe, ko izvajate dejanja v projektu.
    Spremembe v projektu shranimo v oblaku spletne storitve Gravit Designer
    Če želite aktivirati to funkcijo, uporabite bližnjico »Ctrl + S« in v oknu, ki se prikaže, poimenujte sliko in nato kliknite gumb »Shrani« .
  4. Rezultirajočo sliko lahko izvozite v vektorskem formatu SVG ali v bitnem JPEG ali PNG.
  5. Izvozimo sliko iz spletne storitve Gravit Designer
    Poleg tega obstaja možnost, da se projekt shrani kot dokument z razširitvijo PDF.

Glede na dejstvo, da je storitev namenjena polnopravnemu delu z vektorsko grafiko, jo je mogoče varno priporočiti tudi profesionalnim oblikovalcem. S programom Gravit lahko urejate SVG risbe, ne glede na platformo, na kateri delate. Doslej je ta izjava uporabna samo za namizne operacijske sisteme, vendar se bo kmalu ta urejevalnik pojavil na mobilnih napravah.

Metoda 5: Janvas

Priljubljen med spletnimi razvijalci je orodje za ustvarjanje vektorske grafike. Storitev vsebuje številna orodja za risanje s podrobnimi lastnostmi po meri. Glavna značilnost Janvasa je sposobnost ustvarjanja interaktivnih SVG slik, animiranih s CSS. In v povezavi z JavaScript, storitev omogoča tudi gradnjo celotnih spletnih aplikacij.

V spretnih rokah tega urejevalnika je res močno orodje, medtem ko začetnik zaradi obilja vseh vrst funkcij verjetno ne bi razumel, kaj je kaj.

Spletna storitev Janvas

  1. Če želite zagnati spletno aplikacijo v brskalniku, kliknite zgornjo povezavo in kliknite gumb »Začni ustvarjati« .
    Začetek uporabe spletne aplikacije Janvas
  2. V novem oknu se delovni prostor urednika odpre s platnom v središču in orodnimi vrsticami okoli njega.
    Delovni vmesnik spletne storitve za urejanje vektorskih slik Janvas
  3. Dokončano sliko lahko izvozite samo v izbrani pomnilnik v oblaku in samo, če ste kupili naročnino na storitev.
    Meni za izvoz slike v Janvasu

Da, orodje na žalost ni brezplačno. Toda to je profesionalna rešitev, ki ni vedno koristna za vse.

Metoda 6: DrawSVG

Najprimernejša spletna storitev, ki spletnim skrbnikom omogoča, da čim bolj preprosto ustvarijo kakovostne SVG elemente za svoja spletna mesta. Urednik vsebuje impresivno knjižnico oblik, ikon, nalepk, nagibov in pisav.

S pomočjo DrawSVG lahko konstruirate vektorske objekte katere koli vrste in lastnosti, spremenite njihove parametre in jih naredite kot ločene slike. V večpredstavnostne datoteke SVG lahko namestite video in avdio iz računalnika ali omrežnih virov.

Spletna storitev DrawSVG

Ta urednik, za razliko od večine drugih, ni videti kot pristanišče brskalnika namiznega programa. Na levi strani so glavna orodja za risanje, na vrhu pa so kontrolni elementi. Glavni prostor zaseda platno za delo z grafiko.

Vmesnik spletne storitve DrawSVG

Po končanem delu s sliko lahko rezultat shranite kot SVG ali kot bitno sliko.

  1. Če želite to narediti, v orodni vrstici poiščite ikono »Shrani« .
    Let's nadaljujemo, da shranimo rezultat dela v DrawSVG na računalniku
  2. Če kliknete to ikono, bo odprlo pojavno okno z obrazcem za nalaganje dokumenta SVG.
    Prenesite sliko iz DrawSVG v računalnik
    Vnesite želeno ime datoteke in kliknite »Shrani kot datoteko« .
  3. DrawSVG lahko imenujemo lahka različica Janvasa. Urejevalnik podpira delo z atributi CSS, vendar za razliko od prejšnjega orodja ne omogoča animiranja elementov.

Preberite tudi: Odpri vektorske grafične datoteke SVG

Storitve, naštete v tem članku, nikakor niso na voljo v urejevalnikih omrežnih vektorjev. Vendar pa smo tukaj zbirali večinoma brezplačne in dokazane spletne rešitve za delo s SVG-datotekami. Hkrati pa so nekateri med njimi precej sposobni tekmovati z namiznimi orodji. Kako jo uporabljati je odvisno samo od vaših potreb in želja.