20 nuttige SVG-hulpmiddelen voor betere grafische weergave
SVG wint tegenwoordig aan populariteit in webdesign en u kunt tools zoals Illustrator of Inkscape gebruiken om SVG-afbeeldingen te maken. Maar als het gaat om webdesign, moeten we altijd optimaliseren voor lichtere resultaten.
Hier de 20 hulpprogramma's die u kunt gebruiken om snel en efficiënt met SVG te werken. We hebben voornamelijk online tools die kunnen helpen bij het optimaliseren, converteren, patronen maken en meer.
Interactief SVG-coördinatensysteem
Wanneer u met SVG werkt, kunt u de coördinaat niet verlaten. Dit is een geweldige interactieve tool van Sara Souiden, om je te helpen leren hoe SVG-coördinaten werken. De ... gebruiken Viewbox en behoud van beeldverhouding op SVG, geleid door oranje en paarse lijnen en een handige liniaal, kunt u spelen terwijl u leert hoe SVG-coördinaten werken.
b64
b64 is een eenvoudig hulpmiddel om optimaliseer afbeeldingen en verander ze in het base64-formaat. Je kunt je SVG-afbeeldingen laten vallen (andere formaten zoals JPG en PNG werken ook) en pak dan de CSS met base64-achtergrondafbeelding als resultaat.
SVGO
SVG dat wordt geëxporteerd, kan bevatten onnodige informatie die kan worden verwijderd zonder het resultaat van de weergave te beïnvloeden. Als je wilt verwijder metagegevens van de redacteur, opmerkingen of verborgen elementen, je kunt SVGO gebruiken.
U kunt SVGO via npm activeren, $ [sudo] npm install -g svgo of gebruik de GUI-versie die slepen en neerzetten biedt om uw SVG-optimalisatie te voltooien.
SVG OMG
SVG OMG draait de opdrachtregel van SVGO (de vorige tool) in a GUI-versie dat is intuïtiever en gebruiksvriendelijker. Net wisselen tussen de knoppen om elke functie te activeren of te deactiveren. Op het einde kun je het resultaat ook als beeldbestanden en code pakken.
SVG nu
Wanneer u met Illustrator werkt, bevat de geëxporteerde SVG enige informatie die niet nodig is. Met deze tool zul je ontvang de geoptimaliseerde versie van uw geëxporteerde SVG rechtstreeks vanuit uw Illustrator-werkruimte. Deze tool voegt een paneel toe met enkele opties om SVG te optimaliseren. U kunt SVG Now krijgen via de add-ons voor Creative Cloud.
SVG naar PNG-converter
Willen exporteer SVG-bestanden naar PNG-formulier? Zonder applicaties als Illustrator te openen om dit te doen? Gebruik deze SVG naar PNG Converter tool om afbeeldingsoutputs in PNG-formaat te krijgen en ook PNG Base64 data-URI als je het nodig hebt.
SVG Circus
Als je denkt dat loader-animaties cool zijn, kun je dit nu eenvoudig maken door SVG te gebruiken met SVG Circus. Met de hulpmiddelen kunt u maak je eigen loader, spinner of iets dergelijks met behulp van lusanimatie. Stel de 'Actor', positie, grootte, kleur en anderen in het paneel in en exporteer om de resultaten te krijgen.
SVG Sprite
SVG Sprite is een module Node.js, die optimaliseert een stapel SVG-bestanden, en bakt ze in SVG-sprite-typen inclusief traditionele CSS-sprites voor achtergrond- en / of voorgrondafbeeldingen, SVG-stapels en meer.
Quasi
Met quasi je kunt Quasicrystal-afbeeldingen genereren zoals wat je hieronder ziet. Deze generator is experimenteel, maar de resultaten zijn absoluut cool. U kunt rond spelen door de optiewaarde te wijzigen en de resultaten vervolgens downloaden met de knop 'SVG opslaan'.
Effen patroon
Patronen maken met SVG is nog nooit zo gemakkelijk of leuk geweest. Upload je afbeelding, schaal naar beneden of verander de afstand, draai en verkleint tot je een prachtig patroon krijgt. U kunt een voorbeeld van het resultaat bekijken voordat u het downloadt.
Trianglify Generator
Maak prachtige SVG-geometrische patronen met Trianglify Generator. U kunt de kleurverwarring / -variant, granulariteitsgrootte instellen en een kleurenpalet kiezen om mee te werken. Deze tool is een GUI-versie van Trianglify.
SVG-verloop
Je weet dat je gradiënten kunt maken met CSS, maar wist je dat je hetzelfde kunt doen met SVG? De gemakkelijkste manier om genereren gradiënt op SVG is door deze tool te gebruiken. Voer gewoon start- en stopkleur in, dan krijgt u de code voor het gegenereerde resultaat. Een fallback op CSS is ook inbegrepen.
PSD exporteren naar SVG
Als u Photoshop gebruikt als de afbeeldingseditor voor uw werk, moet u dit soms doen converteer uw ontwerp op de Photoshop-werkruimte naar SVG, wat een niet-ondersteund formaat is in Photoshop. Download het script naar deze tool en kopieer het naar de Adobe Photoshop / presets / scripts map.
Hernoem een vectorlaagnaam met de SVG-extensie (bijvoorbeeld layer1 word layer1.svg) en je kunt nu het script uitvoeren vanaf Bestand> Scripts> PS naar SVG.
SVG-filters
Weet je dat je met SVG effecten kunt toevoegen zoals met tint, verzadiging, vervaging, overlay met lineaire kleuren en vele anderen naar afbeeldingen? Hier is een tool die visualiseert deze effecten en geeft je vervolgens een fragment om het gemakkelijk te maken embed het effect in uw project.
SVG Morpheous
SVG Morpheous is een JavaScript-bibliotheek waarmee u kunt Vervorm een SVG-pictogram van de ene vorm naar de andere. U kunt het versnellingseffect, de duur van overgangsanimaties en ook de draairichting instellen.
Clippadgenerator
Met SVG kunt u met Shape op de afbeeldingsclip klikken. Dit is vrij eenvoudig als de vorm de vorm heeft van een vierkant of een cirkel. Maar wat als de vorm één is met veel punten of een veelhoekige vorm heeft? Dat is waar je dit Clip Path Generator-gereedschap nodig hebt.
Chartist.js
Chartist.js is een bibliotheek voor maak zeer aanpasbare responsieve grafieken. Het gebruikt SVG om grafieken weer te geven, die ook kunnen worden geanimeerd met behulp van SMIL. Met deze bibliotheek kunt u lijndiagrammen, cirkeldiagrammen, staafdiagrammen en andere soorten diagrammen maken en zelfs animaties toevoegen.
SVG stroke dash generator
Dit is een eenvoudig hulpmiddel om maak gestippelde lijnen gebruik maken van SVG stroke-dasharray. Kies eerst een type streepje uit de lijst en pas het vervolgens aan in termen van breedte, hoogte, rotatie of kleur. Daarna kunt u de HTML-code en CSS gebruiken om deze streepjeslijn in uw project toe te passen.
Method Draw: A Simple SVG Editor
Method Draw is een webgebaseerde SVG-editor met een intuïtieve interface die wordt geleverd met gereedschappen aan beide zijden van het canvas. U kunt lijnen, vormen, invoertekst of ingebouwde vormen tekenen en vervolgens de eigenschappen van de getekende objecten bewerken. Exporteer de afbeelding in SVG-formaat (komt ook in SVG-base64-indeling) of sla direct op in PNG.
Exporteer Flash naar geanimeerde SVG
Hoewel het niet erg populair is, bestaat de kans dat sommigen van jullie het moeilijk hebben om Flash los te laten. Als dat zo is, kunt u verander je flash-animatie in SVG zodat deze compatibel blijft met nieuwere technologieën. Deze tool vormt een uitbreiding op de Flash-toepassing en kan werken op CS5, CS6 en CC.
U kunt naar SVG exporteren als het gaat om Shapes, Bitmaps-symbolen, Classic Motion Tweens, Shape-tweens (voor anderen is er sprake van aantoonbaar succes).
