Ting, du har brug for at vide om at arbejde med SVG i VS-kode

Tjek denne VS-kode-udgivelse fremhæver video fra Brian Clark. Mod slutningen viser han, hvordan du nu kan zoome ind på billedeksempler i VS-kode.

Jeg troede, det var en interessant funktion. Jeg mener, lad os se det - der er kun to typer mennesker i verden: dem, der kan lide at zoome ind på billeder, og dem, der ikke vil indrømme det. Så jeg åbnede et projekt, som jeg var nødt til at teste det ud, og helt sikkert, det fungerer som annonceret.

Min næste tanke var at se, om det fungerede på SVG-billeder. Fordi jeg kan lide at zoome ind på SVG og se, at den ikke forringes. På dette tidspunkt i mit liv er det en fornøjelig og opfyldende aktivitet.

Det viser sig, at VS-kode ikke giver en visuel forhåndsvisning af SVG-filer fra redaktøren. Hvilket giver mening. SVG er markering, og VS-kode behandler SVG-filer som XML, som kun er tekst. Du har brug for XSLT for at gengive den til noget, du kunne se. Jeg udløste lige en flok af dig, og for det, undskylder jeg.

Her er en god vittighed om XML for at berolige din angst:

”XML er som vold: Hvis det ikke fungerer, bruger du ikke nok af det”
- Ukendt

Dette fik mig til at undre mig, hvis VS-kode behandler SVG som XML, hvilke udvidelser er der til rådighed for at hjælpe mig med at arbejde med SVG i VS-kode? Det viser sig, at der er ganske mange, og nogle fungerer bedre end andre. Her er et par af mine yndlingsudvidelser til at arbejde med SVG i VS-kode.

SVG

Den første udvidelse kaldes bare SVG.

Det er rigtigt. Denne person var først til spillet og fik det eftertragtede SVG-navn til sig selv. Ligesom den person, der registrerede Twitter-navnet “Burke.” Hvad pokker, Sam! Du har ikke tweetet ind .... Du har ALDRIG TWEETED!

Sam, hvis du læser dette - tweet til mig, og lad os tale. Helt seriøst. Du ønsker ikke engang denne konto!

Som du kan se fra denne GIF her, har Visual Studio Code ud af boksen begrænset support til SVG, fordi vi ved, at det behandler det som XML. Det ved, hvordan man korrekt fremhæver markeringen, men det handler om det. Bemærk, at det bogstaveligt talt ikke har nogen forslag til mig her, når jeg prøver at oprette dette rektangel.

Den primære ting, som "SVG" -udvidelsen gør, er at tilføje sprogsupport til SVG til Visual Studio Code. Så nu, når jeg begynder at skrive korrekt, giver det mig muligheder for elementer, jeg måske vil vælge, og en beskrivelse af, hvad de er.

Når det først har elementet, ved det nu også om alle de mulige attributter.

Og det kender endda værdierne for nogle af disse attributter, hvis de er optællinger.

Eksempel

Denne udvidelse giver også en "Preview" -funktion, der viser en side-ved-side-forhåndsvisning med markeringen og det gengivne billede. Dette fås på kommandopallen (Ctrl / Cmd + Shift + P).

Den seje ting ved dette er, at preview-opdateringerne lever, mens du skriver din SVG. Dette giver en temmelig pæn sandkasse til at opbygge SVG-billeder med hånden, hvis det er dit papirstop.

Minify

Denne udvidelse inkluderer også en minify-kommando, der vil minimere din SVG ved hjælp af SVGO. Tag dette smukke billede af en bjergskråning oprettet med Sketch. Ja, jeg lavede det hele alene.

Dette billede er allerede temmelig lille. Det kommer ind på omkring 9kb på disken. SVG-udvidelsen giver en "Minify" -kommando i kommandopallen (Ctrl / Cmd + Shift + P). Brug af denne kommando reducerer billedets størrelse til 5 kb. Det er næsten halvdelen. Temmelig imponerende.

Hvis vi bruger de inline Git-forskelle i VS-kode, kan vi se noget af, hvad SVGO laver. Det fjerner ting, som vi ikke har brug for, som "id" eller en parameter på 0, hvor standard allerede er 0. Det konverterede også min rect til sti. Jeg aner ikke hvorfor, men det er superinteressant! Uanset hvad, SVGO. Jeg stoler på dig. Gør din ting.

Det er mest af, hvad SVG for VS-kode gør. Men der er en anden SVG-udvidelse, der også er relevant her - SVG Viewer.

SVG Viewer

SVG Viewer giver den samme billede side om side, som SVG-udvidelsen gør. Imidlertid har denne to hovedfordele. Først kan du åbne forhåndsvisningen automatisk, når du klikker på en svg-fil ved at tilføje følgende linje til din brugerindstillinger-fil.

"svgviewer.enableautopreview": sandt,

OG det krymper billedet, så det passer til vinduet. Jeg ved ikke, om jeg kan lide dette endnu, men jeg tror, ​​at jeg gør det. Jeg tror, ​​at jeg foretrækker dette frem for et gigantisk billede, som jeg ikke kan se hele.

Konverter til PNG

Denne udvidelse tilføjer også en konverteringskommando, så du kan inline konvertere din SVG til PNG. Tag dette lastbilbillede. Jeg eksporterede det som SVG, men det er bare en data-URI indpakket i et svg-tag. Der er ingen mening i. Jeg kan lige så godt tage det tilbage til et statisk billede. Med denne udvidelse behøver jeg ikke gå tilbage til Sketch for at gøre det.

Denne udvidelse giver dig også mulighed for at kopiere data URI-skemaet til enhver SVG. Jeg gætte, det er rart, men det er ikke noget, jeg nogensinde gør. Jeg er sikker på, at jeg bliver nødt til at gøre det nu, når jeg har sagt det.

Den sidste udvidelse, der er værd at bemærke, er SVG Editor.

SVG Editor

SVG Editor-udvidelsen er super aggressiv. Den forsøger at oprette en komplet SVG-redigeringsflade inde i VS-koden, komplet med tegneværktøjer og hele ni yards.

Det er vigtigt at bemærke, at denne udvidelse overhovedet ikke fungerer for mig. Ligesom den er der, men den gør bare ikke noget så vidt jeg kan fortælle. Eller måske gør jeg det forkert. Der er stor sandsynlighed for. Min omfattende testmetode bestod af "klik omkring en flok og se hvad der sker." Intet har nogensinde gjort.

Jepp - fungerer ikke. Men et tip af hatten for at prøve at opbygge en grafikeditor til Visual Studio Code. Det er ingen let opgave, og det faktum, at nogen endda forsøgte at gøre det, er meget imponerende for mig.

Nyd din SVG

Med udvidelser har VS-kode nogle ret solide support til SVG. De to store ting for mig er kodefærdiggørelsen og forhåndsvisningen. Selvom jeg skal bemærke, at du ikke kan zoome ind på nogen af ​​forhåndsvisningerne, så jeg stadig ikke kan tilfredsstille min underlige trang til at se vektorgrafikskalaen.

Du kan gribe den seneste version af VS-kode i dag og installere disse SVG-udvidelser på din fritid.