Koncept vektorskih slika u ogromnom broju običnih korisnika računala ne govori ništa. Dizajneri, pak, sve su skloni koristiti ovu vrstu grafike za svoje projekte.

Prethodno, za rad s SVG-slikama, trebate instalirati jedno od specijaliziranih desktop rješenja na vaše računalo Adobe Illustrator ili Inkscape , Sada su ti alati dostupni na mreži, bez potrebe za preuzimanjem.

Pročitajte također: Učenje kako privući Adobe Illustrator

Kako raditi s SVG online

Ispunjavanjem odgovarajućeg upita na Googleu možete vidjeti ogroman broj svih vrsta urednika vektora na mreži. No, velika većina takvih rješenja nudi prilično male mogućnosti i najčešće ne dopuštaju rad s ozbiljnim projektima. Pogledat ćemo najbolje usluge za stvaranje i uređivanje SVG slika izravno u pregledniku.

Naravno, on-line alati ne mogu u potpunosti zamijeniti odgovarajuće aplikacije za stolna računala, ali većina korisnika predloženog skupa značajki bit će više nego dovoljna.

Metoda 1: Vectr

Dobro osmišljen urednik vektora kreatora poznate Pixlr usluge. Ovaj alat će biti koristan i za početnike i iskusne korisnike u radu s SVG-om.

Unatoč brojnim funkcijama, bit će teško izgubiti u Vectr sučelju. Za početnike pružaju se detaljne lekcije i opsežne upute za svaku komponentu usluge. Među alatima urednika postoji sve za stvaranje SVG slika: oblika, ikona, okvira, sjena, četki, podrška za rad s slojevima itd. Možete nacrtati sliku ispočetka ili prenijeti vlastitu.

Online usluga Vectr

  1. Prije nego što počnete koristiti resurs, poželjno je da se prijavite na njega pomoću jedne od dostupnih društvenih mreža ili izradite račun na web mjestu ispočetka.
    Prozor za autorizaciju u Vectr
    To vam omogućuje ne samo preuzimanje rezultata vašeg rada na računalu, već u bilo kojem trenutku spremite promjene u "oblak".
  2. Sučelje usluge je što jednostavnije i jednostavnije: s lijeve strane platna dostupni su alati, a desno - varijabilna svojstva svake od njih.
    Radno sučelje vektorskog mrežnog urednika Vectr
    Podržava stvaranje više stranica, za koje postoje dimenzionalni predlošci za sve ukuse - od grafičkih prikaza u društvenim mrežama, do standardnih formata listova.
  3. Izvoz gotovih slika klikom na gumb sa strelicom na traci izbornika s desne strane.
    Izvoz SVG slike iz Vectr
  4. U prozoru koji se otvori definirajte boot parametre i kliknite na "Download" .
    SVG izvozni prozor iz Vectr usluge

Jedna od najpoželjnijih osobina Vectr je podrška izvoznim mogućnostima: podrška za izravne veze na SVG projekt u uredniku. Mnogi resursi ne dopuštaju izravno preuzimanje vektorskih slika izravno, ali ipak omogućuju njihov daljinski prikaz. U ovom slučaju, Vectra se može koristiti kao pravi hosting SVG, koji druge usluge ne dopuštaju.

Treba napomenuti da urednik ne obrađuje ispravno složenu grafiku. Zbog toga se neki projekti mogu otvoriti u Vectr s pogreškama ili vizualnim artefaktima.

Druga metoda: Sketchpad

Jednostavan i praktičan web editor za stvaranje SVG slika, temeljenih na HTML5 platformi. S obzirom na skup dostupnih alata, može se tvrditi da je usluga namijenjena isključivo za crtanje. S Sketchpad možete stvoriti lijepe, pažljivo izrađene slike, ali ne i više.

Alat ima širok raspon prilagodljivih četkica raznih oblika i vrsta, skup oblika, fontova i naljepnica za prekrivanje. Urednik vam omogućuje potpunu manipulaciju slojevima - za kontrolu njihovog načina postavljanja i miješanja. Pa, kao bonus, aplikacija je u potpunosti prevedena na ruski, pa ne biste trebali imati poteškoća s njegovim razvojem.

Sketchpad online usluga

  1. Sve što trebate raditi s urednikom je preglednik i pristup mreži. Ne postoji mehanizam autorizacije na web mjestu.
    Sučelje sketchpad-a na mrežnom vektoru grafike
  2. Da biste preuzeli gotovu sliku na računalo, kliknite ikonu disketne ploče na traci izbornika s lijeve strane, a zatim odaberite željeni format iz skočnog prozora.
  3. Preuzmite gotovu SVG sliku od online uređivača Sketchpad

Ako je potrebno, možete spremiti nedovršeni crtež kao projekt Sketchpad, a zatim ga urediti u bilo kojem trenutku.

3. metoda: nacrt metode

Ova web aplikacija dizajnirana je za osnovne operacije s vektorskim datotekama. Izvana, alat sliči desktopu Adobe Illustrator, ali ovdje je mnogo jednostavnije u smislu funkcionalnosti. Međutim, postoje neke značajke u načinu Draw.

Pored rada s SVG slikama, urednik vam omogućuje uvoz rasternih slika i stvaranje vektora na temelju njih. To možete učiniti ručno pronalazom obrisa pomoću pisaljke. Aplikacija sadrži sve potrebne alate za sastavljanje vektorskih crteža. Postoji proširena biblioteka slika, paleta boja i podrška za tipkovničke prečace.

Metoda online usluge Metoda

  1. Resurs ne zahtijeva registraciju korisnika. Samo idite na stranicu i radite s postojećom vektorskom datotekom ili stvorite novu.
    Radno sučelje online izdavača vektorske grafike Draw Draw
  2. Uz stvaranje SVG fragmenata u grafičkom okruženju, možete urediti sliku izravno na razini koda.
    Uređivanje SVG slike na razini koda u načinu Draw
    Da biste to učinili, idite na "Prikaz" - "Izvor ..." ili upotrijebite tipkovnički prečac "Ctrl + U" .
  3. Po završetku rada na slici, ona se odmah može spremiti na računalo.
  4. Preuzmite SVG-sliku na računalu pomoću metode Usluge metode
    Da biste izvezli sliku, otvorite stavku izbornika "File" i kliknite "Save Image ..." . Ili upotrijebite prečac "Ctrl + S" .

Metoda Crtanje definitivno nije prikladna za stvaranje ozbiljnih projekata vektora - razlog je nedostatak odgovarajućih funkcija. No, zahvaljujući nedostatku nepotrebnih elemenata i kompetentno organiziranom radnom prostoru, usluga može savršeno poslužiti za brzo uređivanje ili prilagodbu točaka jednostavnih SVG slika.

4. metoda: Gravit Dizajner

Besplatna vektorska grafika web grafike za napredne korisnike. Mnogi dizajneri stavljaju Gravit u ravnopravnost s punim radnim stolnim rješenjima, poput istog Adobe Illustratora. Činjenica je da je ovaj alat cross-platform, tj. Potpuno je dostupan na svim računalnim operativnim sustavima, kao i kao web aplikacija.

Gravit Designer je u aktivnoj fazi razvoja i redovito prima nove funkcije, koje su već dovoljno za složene projekte.

Gravit Designer Online usluga

Urednik vam nudi sve vrste alata za crtanje konture, oblika, staza, tekstnih slojeva, ispunjavanja i različitih prilagođenih efekata. Postoji opsežna biblioteka slika, tematskih slika i ikona. Svaki element Gravitovog prostora ima popis dostupnih svojstava za izmjenu.

Uređivanje slike predloška u mrežnoj usluzi Gravit Dizajner

Sve je to raznovrsno pakirano u elegantno i intuitivno sučelje, tako da je svaki alat dostupan doslovno u nekoliko klikova.

  1. Da biste započeli s uređivanjem, ne morate izrađivati ​​račun u usluzi.
    Registriramo se u online servis Gravit Dizajner
    No ako želite koristiti gotove predloške, morat ćete stvoriti besplatan "račun" za Gravit Cloud.
  2. Za stvaranje novog projekta od nule u prozoru dobrodošlice idite na karticu "Novi dizajn" i odaberite željenu veličinu platna.
    Stvorite novi projekt u online izdavaču SVG Gravit Designer
    U skladu s tim, za rad s predloškom otvorite odjeljak "Novo iz predloška" i odaberite željeni dio.
  3. Gravit može automatski spremiti sve izmjene kada izvršite radnje na projektu.
    Spremit ćemo promjene u projektu u oblak usluge Gravit Designer na mreži
    Da biste aktivirali tu značajku, upotrijebite prečac "Ctrl + S" i u prozoru koji će se pojaviti, navedite sliku, a zatim kliknite gumb "Spremi" .
  4. Rezultirajuća slika može se izvesti u SVG vektorskom formatu, ili u bitmap JPEG ili PNG.
  5. Fotografiju izvezemo iz internetske usluge Gravit Designer
    Osim toga, postoji mogućnost spremanja projekta kao dokumenta s proširenjem PDF-a.

S obzirom na činjenicu da je usluga namijenjena punopravnom radu s vektorskom grafikom, to se sigurno može preporučiti i profesionalnim dizajnerima. S Gravitom možete uređivati ​​SVG crteže, bez obzira na platformu na kojoj radite. Dosad je ova izjava primjenjiva samo za OS desktop, ali uskoro će se taj urednik pojaviti na mobilnim uređajima.

Metoda 5: Janvas

Popularan među web programerima je alat za stvaranje vektorske grafike. Usluga sadrži niz alata za crtanje s detaljnim prilagođenim svojstvima. Glavna značajka Janvas je mogućnost stvaranja interaktivnih SVG slika, animiranih s CSS-om. A u suradnji s JavaScript-om, usluga vam omogućuje i izgradnju čitavih web aplikacija.

U vještim rukama ovog urednika je stvarno moćan alat, a početnik zbog obilje svih vrsta funkcija je vjerojatno samo da ne razumije što je to.

Online usluga Janvas

  1. Za pokretanje web aplikacije u pregledniku kliknite gornju vezu i kliknite gumb "Pokreni za stvaranje" .
    Početak korištenja Janvas web aplikacije
  2. U novom prozoru, radno područje urednika otvara se s platnom u sredini i alatnim trakama oko nje.
    Radno sučelje online usluge za uređivanje vektorskih slika Janvas
  3. Gotovu sliku možete izvesti samo u odabranu pohranu oblaka i samo ako ste kupili pretplatu na uslugu.
    Izbornik izvoza slika u Janvasu

Da, alat nažalost nije besplatan. Ali ovo je profesionalno rješenje, koje nije uvijek korisno svima.

Metoda 6: DrawSVG

Najprikladnija mrežna usluga koja webmasterima omogućuje jednostavnije stvaranje visokokvalitetnih SVG elemenata za svoje web stranice. Urednik sadrži impresivnu knjižnicu oblika, ikona, ispunjava, gradijente i fontove.

Pomoću DrawSVG-a možete izgraditi vektorske objekte bilo koje vrste i svojstava, mijenjati njihove parametre i prikazati ih kao zasebne slike. Moguće je ugraditi multimedijalne datoteke SVG treće strane: video i audio iz računala ili mrežnih izvora.

Online usluga DrawSVG

Ovaj urednik, za razliku od većine drugih, ne izgleda kao luka preglednika aplikacije za stolna računala. S lijeva su glavni alati za crtanje, a na vrhu su kontrole. Glavni prostor zauzima platno za rad s grafikom.

Sučelje online usluge DrawSVG

Nakon što ste završili s fotografijom, možete spremiti rezultat kao SVG ili kao bitmap sliku.

  1. Da biste to učinili, na alatnoj traci pronađite ikonu "Spremi" .
    Nastavimo sa spremanjem rezultata rada u sustavu DrawSVG na računalu
  2. Klikom na ovu ikonu otvorit će se skočni prozor s obrazacom za učitavanje SVG dokumenta.
    Preuzmite sliku s DrawSVG na računalo
    Unesite željeni naziv datoteke i kliknite "Spremi kao datoteku" .
  3. DrawSVG se može nazvati lakom verzijom Janvas. Urednik podržava rad s CSS atributima, ali za razliku od prethodnog alata, ne dopušta animiranje elemenata.

Pročitajte također: Otvorite SVG vektorske grafičke datoteke

Usluge navedene u ovom članku nikako nisu dostupne u urednicima mrežnih vektora. Međutim, ovdje smo uglavnom sastavili besplatna i dokazana mrežna rješenja za rad s SVG datotekama. Istovremeno, neki od njih vrlo su sposobni natjecati se sa stolnim alatima. Pa, kako ga koristiti ovisi samo o vašim potrebama i željama.