Ecommerce: Personalizando tus productos con SVG(Scalable Vector Graphics)

22-03-2016
 

Una de las funcionalidades mas demandadas últimamente es permitir a los clientes personalizar sus productos durante el proceso de compra. Es importante que el diseño se integre perfectamente en el proceso de compra. Por ejemplo, compro unas bambas y elijo los colores o les imprimo una foto.

En el siguiente ejemplo encontrareis una prueba de concepto de editor de tarjetas, concretamente podréis personalizar mi tarjeta de visita. El editor esta desarrollado completamente en HTML5 y no necesita ningún tipo de plugin para funcionar y permite editar cualquier diseño en SVG.

HTML5 SVG Editor

HTML5 SVG Editor

Para crear las plantillas podéis usar el programa Inkscape, esta disponible para todas las plataformas.

Como comentaba, SVG es totalmente estándar y lo admiten la mayoría de navegadores. Para incluirlo en una página web basta con añadir la etiqueta ‘<svg>’ y ya esta:

	<svg>
		<!-- Tu document SVG aquí -->
	</svg>

Un documento SVG utiliza lenguaje de marcado XML y podremos editarlo usando Javascript.

Leave a Reply

© Albert Coronado Calzada