Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘SVG’

Map Icons is a free icon font that is built to be used with Google Maps API + Google Places API.

These icons extends the Google Maps Marker object to enable either an image or SVG marker to be used with the icon placed on top as a label. But, but they can be a perfect fit for any mapping-related content/app.

It includes 100+ icons with items for almost any type “points of interest” and location markers.

Map Icons

  • Tags:
  • Filed under: Design, Font, Goodies, Map, Other License
  • 1 Comment
  • It seems like there are still areas in icon design where you can hardly find free sets about them.

    Lots of icon sets are published at WRD and this is a unique one: SEO Icons.

    SEO Icons

    The set has 25 icons with items like analytics, code optimization, lading page, performance, page speed and much more.

    They are available in 3 different styles and in multiple file formats (AI, EPS, SVG).

  • Tags:
  • Filed under: Design, Icons, Other License
  • 0 Comments
  • Noupe has recently released a pretty huge icon set of vector monuments from all around the world.

    The set includes 250 items with well-known monuments of many countries and can fit well to any country-focused design project.

    Free Monument Icons

    All items are available as PNG (32*32px, 64*64px and 128*128px), AI, EPS, PSD and SVG.

    And, they are free to use for both personal or commercial projects.

    There are various web-based tools for creating and customizing icon fonts.

    Fontastic is another solid option for that which enables us to choose items from multiple icon sets.

    The chosen items are combined into a single font with a click where this approach helps minimizing the font size as we only choose the icons needed.

    It is also possible to intervene the naming process and import our own SVG icons.

    Fontastic

    FusionCharts LogoToday, almost every web application uses charts to visualize data and provide as much information as possible with a user-friendly interface.

    FusionCharts Suite XT is a professional (and paid) JavaScript chart library that enables us to create any type of charts.

    FusionCharts Splash

    It uses SVG and has support for 90+ chart types, including 3D, gantt, funnel, various gauges and even maps of world/continents/countries/states. Also, most of the charts have both 2D and 3D versions.

    They are very easy-to-create and, optionally, an official jQuery plugin exists to simplify it more. Just define the chart type, insert the data and you are almost there.

    FusionCharts Demo1

    Charts are completely customizable. The labels, fonts, colors, borders, etc. can all be changed.

    And, they are heavily interactive with tooltips, clickable legend keys, drill-down, zooming/scrolling and one-click chart export or print.

    FusionCharts Map

    Considering that the charts are rendered in SVG, they are compatible with any desktop or mobile browser including the old versions like IE6.

    When building something complicated, besides the features, the support becomes important too. FusionCharts Suite XT is very well-documented, has an active community forum and comes with pro support.

    The library has a detailed pricing structure that covers many use-cases like: commercial website, intranet, Saas app and more.

    Drawing anything using modern web technologies is possible, however, the default APIs are not that user-friendly.

    Two.js is an exciting JavaScript library that provides a 2-dimensional and single drawing API for SVG, Canvas And WebGL.

    The library has only (currently) support for shapes (no text or images) and allows importing SVG data.

    Two.js

    It can group multiple elements which is useful when transforming them together.

    There is a built-in animation loop, methods to draw well-known shapes and lots of options to customize them.

    Kartograph is a framework for creating interactive maps without any mapping provider (like Google Maps).

    It consists of 2 libraries:

    • a Python library thatrenders vector maps from shapefiles or PostGIS and converts them to SVG
    • a JavaScript library for turning these SVG data into interactive maps
    Kartograph

    If you already have the SVG data (for ex: any drawing can be converted to SVG with Adobe Illustrator), only the JavaScript library can help too.

    The JS library uses jQuery + Raphaël, outputs can be styled with CSS and a very good documentation is provided.

  • Tags:
  • Filed under: Goodies, LGPL License, Map
  • 0 Comments
  • Maps are used so widely in web design and they are usually expected to be interactive when presenting data.

    It can be the branches of an international company, statistics about  countries or just destinations to visualize. Like said, lots of uses.

    Simplemaps is a website that provides professional, highly-customizable and interactive maps built with JavaScript and SVG (or Flash).

    SVG Maps - Simplemaps

    SVG has a wide browser-support and it works very well on mobile + tablet as well.

    There are maps for “world/countries, continents, USA and Canada” and the usage +customization doesn’t require advanced development knowledge. It works by simply editing a text file and a detailed, step-by-step documentation exists.

    Also, Simplemaps website has an online customization tool that enables the users to edit the countries, change colors, descriptions, links and more.

    Considering that the maps are in vector (SVG), tiny or huge, they work great on all sizes. And, they even come with a zoom-in functionality.

    SVG USA map

    With some JavaScript, it is so easy to add new features to them like tooltips, selectable regions and much more.

    To sum up, SVG maps are definitely the way to go for modern web maps and Simplemaps has a wide range of products on the field.

    P.S. For Flash fans, the website also offers similar maps in Flash with their source code.

    How to join the giveaway?

    Simplemaps is giving away 3 licenses (for a map of your selection). Commenting to this post is enough.

    Winners will be selected on 22 April 2013 (1 week later) with the query below and announced as an update to this post.:

    SELECT * FROM wp_comments WHERE comment_post_id=3981 AND comment_approved=1 AND comment_type='' GROUP BY comment_author_email ORDER BY RAND() LIMIT 3

    Good luck to all.

    The winners

    Here they are:

    • Roshin C (comment #1260748)
    • Jed (comment #1260726)
    • DR (comment #1260708)
    Congratulations and thanks to everyone for joining.

    1260708

    You may remember CSS3 Patterns Gallery that was created by Lea Verou which is a great idea for flexible patterns.

    Here is an alternative: SVG Patterns Gallery that uses only SVG for creating good-looking patterns.

    Compared to standard images, SVG scales perfectly, high-dpi screens can make use of it and it works on IE9 too (CSS3 gradients don’t).

    SVG Patterns Gallery

    SVG.js is a JavaScript library for working (manipulating and animating) with SVG without any complexity.

    The library is standalone, very lightweight in size (5kb gzipped) and has lots of features.

    There are built-in methods for creating shapes (rectangle, circle, polygon, etc.) or defining images.

    SVG.js

    They can all be animated with size, position, color or any other properties and be interacted with standard JavaScript events.

    It has support for grouping elements for mass manipulations, filling them is possible and a unified API simplifies working with the library.

    SVG.js is extendable with plugins and there are already various plugins (like dragging or easing).

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com