{"id":9000,"date":"2019-11-30T23:59:50","date_gmt":"2019-11-30T21:59:50","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=9000"},"modified":"2020-07-06T12:53:27","modified_gmt":"2020-07-06T10:53:27","slug":"svg-clipping-y-masking","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/","title":{"rendered":"SVG: Diferencias entre Clipping y Masking"},"content":{"rendered":"<p style=\"text-align: justify\">Buenos d\u00edas a todos,<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\"><span class=\"TextRun SCXW158058005 BCX0\" lang=\"ES\" xml:lang=\"ES\"><span class=\"NormalTextRun SCXW158058005 BCX0\">Los<strong> <a href=\"https:\/\/www.espai.es\/blog\/2016\/05\/para-que-sirve-la-etiqueta-svg-en-html5\/\">SVG<\/a><\/strong> son excelentes para trabajar en la web, y el <strong>Clipping (recorte)<\/strong> y el<strong> Masking (enmascaramiento)<\/strong> <span class=\"TextRun SCXW237695598 BCX0\" lang=\"ES\" xml:lang=\"ES\"><span class=\"NormalTextRun SCXW237695598 BCX0\">tienen la capacidad de ocultar total o parcialmente partes de un objeto mediante el uso de formas simples o complejas.\u00a0<\/span><\/span><span class=\"EOP SCXW237695598 BCX0\">\u00a0<\/span><\/span><\/span><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\"><span class=\"TextRun SCXW176772769 BCX0\" lang=\"ES\" xml:lang=\"ES\"><span class=\"NormalTextRun SCXW176772769 BCX0\">El uso de estas t\u00e9cnicas tambi\u00e9n permite una mayor flexibilidad con sus dise\u00f1os, ya que no tiene que hacer cambios manualmente y crear nuevas im\u00e1genes, todo se hace con c\u00f3digo. Al usar una combinaci\u00f3n de t\u00e9cnicas de enmascaramiento y recorte CSS, tendr\u00e1s muchas opciones para los gr\u00e1ficos de su sitio web.<\/span><\/span><span class=\"EOP SCXW176772769 BCX0\">\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\"><span class=\"TextRun BCX0 SCXW206496743\" lang=\"ES\" xml:lang=\"ES\"><span class=\"NormalTextRun BCX0 SCXW206496743\"><strong>\u00bfCu\u00e1l es la diferencia entre recortar y enmascarar?<\/strong> Vamos a echar un vistazo a cada uno para obtener una mejor comprensi\u00f3n.<\/span><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"text-decoration: underline\"><strong>Clipping: recortar<\/strong><\/span><\/h2>\n<p style=\"text-align: justify\">Clipping\u00a0se refiere a eliminar partes de elementos definidos por otras partes.<\/p>\n<p style=\"text-align: justify\">El clipping (trazado de recorte) es un objeto donde todo lo que est\u00e1 dentro de la forma definida es visible, mientras que la parte exterior se \u00abrecorta\u00bb y no aparece en el lienzo.\u00a0En este caso, los efectos semitransparentes no son posibles, es un enfoque de todo o nada.\u00a0 El limite de la forma se llama clip path, no se debe confundir con la propiedad clip.\u00a0 Creas un \u00abtrazado de recorte\u00bb utilizando la propiedad <a href=\"https:\/\/www.w3.org\/TR\/css-masking-1\/#ClipPathElement\">&lt;clip-path&gt;<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/clipPath.png\" rel=\"attachment wp-att-9011\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-9011\" style=\"border: 2px solid black\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/clipPath.png\" alt=\"clipPath svg\" width=\"568\" height=\"226\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/clipPath.png 455w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/clipPath-300x119.png 300w\" sizes=\"auto, (max-width: 568px) 100vw, 568px\" \/><br \/>\n<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>La forma final corresponde al c\u00f3digo siguiente, en el cual se puede ver que se hace referencia al ID del clipPath en el HTML y c\u00f3mo utiliza la URL del clip-path para hacer el recorte.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/clipCode-1.jpg\" rel=\"attachment wp-att-9044\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9044 aligncenter\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/clipCode-1.jpg\" alt=\"\" width=\"740\" height=\"176\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/clipCode-1.jpg 740w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/clipCode-1-300x71.jpg 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/clipCode-1-700x166.jpg 700w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Herramienta para el clipping<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">Para ayudarnos a crear formas complejas, existe una herramienta online, que se llama <strong><a href=\"https:\/\/bennettfeely.com\/clippy\/\">Clippy<\/a><\/strong>, es muy f\u00e1cil de uso y os la recomiendo:<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/clippy.jpg\" rel=\"attachment wp-att-9017\"><img decoding=\"async\" class=\" wp-image-9017 aligncenter\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/clippy.jpg\" alt=\"\" width=\"70%\" height=\"391\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/clippy.jpg 720w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/clippy-300x164.jpg 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/clippy-700x382.jpg 700w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"text-decoration: underline\"><strong>Masking:\u00a0<span class=\"TextRun SCXW158058005 BCX0\" lang=\"ES\" xml:lang=\"ES\"><span class=\"NormalTextRun SCXW158058005 BCX0\">enmascaramiento<\/span><\/span><\/strong><\/span><\/h2>\n<p>El\u00a0masking, por otro lado, permite bordes suaves teniendo en cuenta la transparencia y los valores grises de la m\u00e1scara.<\/p>\n<p>El masking se realiza utilizando una imagen PNG, un degradado CSS o un elemento SVG para ocultar parte de una imagen u otro elemento en la p\u00e1gina. Hoy veremos los gr\u00e1ficos SVG, pero tenga en cuenta que esto se puede hacer con otros tipos de estilos de im\u00e1genes.<\/p>\n<p>En el c\u00f3digo siguiente, ten\u00e9is un ejemplo de una mascara, de estilo degradado.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center\"><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/mask.png\" rel=\"attachment wp-att-9020\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9020\" style=\"border: 2px solid black\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/mask.png\" alt=\"mask svg\" width=\"639\" height=\"132\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/mask.png 639w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/mask-300x62.png 300w\" sizes=\"auto, (max-width: 639px) 100vw, 639px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/gradientMask-min.jpg\" rel=\"attachment wp-att-9039\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9039 aligncenter\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/gradientMask-min.jpg\" alt=\"gradient mask svg\" width=\"740\" height=\"202\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/gradientMask-min.jpg 740w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/gradientMask-min-300x82.jpg 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/gradientMask-min-700x191.jpg 700w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>La propiedad mask y el elemento mask<\/strong><\/p>\n<p>Para ayudar a visualizar, es importante tener en cuenta que el elemento enmascarado es la imagen <em>original.\u00a0<\/em><\/p>\n<p>Es posible que no desee ver la imagen entera, por lo que ocultar partes se realiza con la propiedad mask en CSS. Mask es la abreviatura en CSS para un grupo de propiedades individuales.<\/p>\n<p>El elemento &lt;mask&gt; se usa dentro de un gr\u00e1fico SVG para agregar efectos de enmascaramiento.<\/p>\n<p>&nbsp;<\/p>\n<p><b>Usar el elemento de mascara SVG en un gr\u00e1fico\u00a0SVG<\/b><\/p>\n<p style=\"text-align: justify\">Para tener una idea del elemento &lt;mask&gt; de SVG, estaremos enmascarando con un gr\u00e1fico SVG.<\/p>\n<p style=\"text-align: justify\"><span class=\"TextRun SCXW133189175 BCX0\" lang=\"ES\" xml:lang=\"ES\"><span class=\"NormalTextRun SCXW133189175 BCX0\">Puede<\/span><\/span><span class=\"TextRun SCXW133189175 BCX0\" lang=\"ES\" xml:lang=\"ES\"><span class=\"NormalTextRun SCXW133189175 BCX0\">\u00a0ser un poco complejo a primera vista, pero todo funciona en conjunto para enmascarar la imagen subyacente. Tenemos una imagen real como fondo, entonces, \u00bfd\u00f3nde entra en juego el SVG? Esta imagen de fondo est\u00e1 t\u00e9cnicamente dentro de un elemento SVG. Utilizaremos CSS para aplicar esta m\u00e1scara a la imagen. Las propiedades provendr\u00e1n del elemento mask de SVG, y le daremos la identificaci\u00f3n class de masked-element en nuestro CSS.<\/span><\/span><span class=\"EOP SCXW133189175 BCX0\">\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/maskEle.jpg\" rel=\"attachment wp-att-9047\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9047 aligncenter\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/maskEle.jpg\" alt=\"mask element svg\" width=\"740\" height=\"62\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/maskEle.jpg 740w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/maskEle-300x25.jpg 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/maskEle-700x59.jpg 700w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>Con este CSS, estamos especificando d\u00f3nde encontrar la m\u00e1scara. Buscar\u00e1 la ID de #mask-this:<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/cssMask.jpg\" rel=\"attachment wp-att-9048\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9048 aligncenter\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/cssMask.jpg\" alt=\"css mask element\" width=\"740\" height=\"72\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/cssMask.jpg 740w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/cssMask-300x29.jpg 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/cssMask-700x68.jpg 700w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/mask2Code.jpg\" rel=\"attachment wp-att-9029\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-9029 aligncenter\" style=\"border: 2px solid black\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/mask2Code.jpg\" alt=\"mask svg\" width=\"435\" height=\"369\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/mask2Code.jpg 318w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/mask2Code-300x255.jpg 300w\" sizes=\"auto, (max-width: 435px) 100vw, 435px\" \/><\/a><\/p>\n<p><span class=\"TextRun SCXW41580203 BCX0\" lang=\"ES-ES\" xml:lang=\"ES-ES\"><span class=\"NormalTextRun SCXW41580203 BCX0\">\u00bfNota un gradiente en la forma del c\u00edrculo? Se ha aplicado un degradado, as\u00ed como establecer la forma del c\u00edrculo para la m\u00e1scara.<\/span><\/span><span class=\"EOP SCXW41580203 BCX0\">\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/maskCode2.jpg\" rel=\"attachment wp-att-9049\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-9049 aligncenter\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/maskCode2.jpg\" alt=\"mask code svg\" width=\"740\" height=\"195\" srcset=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/maskCode2.jpg 740w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/maskCode2-300x79.jpg 300w, https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/maskCode2-700x184.jpg 700w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Soporte de los navegadores<\/strong><\/p>\n<p style=\"text-align: justify\"><span class=\"TextRun SCXW246337699 BCX0\" lang=\"ES\" xml:lang=\"ES\"><span class=\"NormalTextRun SCXW246337699 BCX0\">Antes de comprometerse con esta nueva forma de trabajar con gr\u00e1ficos, es importante tener en cuenta que el soporte de los navegadores.\u00a0<span class=\"TextRun BCX0 SCXW52513815\" lang=\"ES\" xml:lang=\"ES\"><span class=\"NormalTextRun BCX0 SCXW52513815\">El recorte es m\u00e1s compatible que el enmascaramiento.\u00a0<span class=\"TextRun SCXW192799961 BCX0\" lang=\"ES\" xml:lang=\"ES\"><span class=\"NormalTextRun SCXW192799961 BCX0\">No permita que las limitaciones te desanimen: siempre es bueno estar a la vanguardia y una vez que el soporte sea m\u00e1s convencional, sabr\u00e1 exactamente c\u00f3mo revolucionar sus gr\u00e1ficos. En caso de duda, consulte el sitio<a href=\"https:\/\/caniuse.com\/\"> Can I Use<\/a> para comprobar el soporte.<\/span><\/span><span class=\"EOP SCXW192799961 BCX0\">\u00a0<\/span><\/span><\/span><\/span><\/span><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\"><span class=\"TextRun BCX0 SCXW264586325\" lang=\"ES\" xml:lang=\"ES\"><span class=\"NormalTextRun BCX0 SCXW264586325\">En este articulo hemos visto unos ejemplos para una introducci\u00f3n al enmascaramiento y recorte.\u00a0<\/span><\/span>Como has podido comprobar las propiedades clip-path y mask, nos dan muchas posibilidades en dise\u00f1o web. Por eso os animo a poner el clipping y el masking en practica y en un proximo articulo veremos m\u00e1s del making y de los efectos que se pueden conseguir con esta t\u00e9cnica.<\/p>\n<p>&nbsp;<\/p>\n<p>Saludos y hasta el pr\u00f3ximo articulo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Buenos d\u00edas a todos, &nbsp; Los SVG son excelentes para trabajar en la web, y el Clipping (recorte) y el Masking (enmascaramiento) tienen la capacidad de ocultar total o parcialmente partes de un objeto mediante el uso de formas simples o complejas.\u00a0\u00a0 &nbsp; El uso&#8230;<\/p>\n","protected":false},"author":33,"featured_media":9054,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-9000","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>SVG: Diferencias entre Clipping y Masking - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"Cararcteristicas principales y ejemplos del Clipping (recorte) y del Masking (enmascaramiento) en SVG. Utilizaci\u00f3n del los elementos clip-path y mask.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"SVG: Diferencias entre Clipping y Masking - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"Cararcteristicas principales y ejemplos del Clipping (recorte) y del Masking (enmascaramiento) en SVG. Utilizaci\u00f3n del los elementos clip-path y mask.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-30T21:59:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-06T10:53:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/BLOGHOME.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"359\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Stephanie Guerrero\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stephanie Guerrero\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/\"},\"author\":{\"name\":\"Stephanie Guerrero\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\"},\"headline\":\"SVG: Diferencias entre Clipping y Masking\",\"datePublished\":\"2019-11-30T21:59:50+00:00\",\"dateModified\":\"2020-07-06T10:53:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/\"},\"wordCount\":787,\"commentCount\":1,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/BLOGHOME.png\",\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/\",\"name\":\"SVG: Diferencias entre Clipping y Masking - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/BLOGHOME.png\",\"datePublished\":\"2019-11-30T21:59:50+00:00\",\"dateModified\":\"2020-07-06T10:53:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\"},\"description\":\"Cararcteristicas principales y ejemplos del Clipping (recorte) y del Masking (enmascaramiento) en SVG. Utilizaci\u00f3n del los elementos clip-path y mask.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/BLOGHOME.png\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/BLOGHOME.png\",\"width\":800,\"height\":359},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SVG: Diferencias entre Clipping y Masking\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\",\"name\":\"Stephanie Guerrero\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g\",\"caption\":\"Stephanie Guerrero\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/s-guerrero\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"SVG: Diferencias entre Clipping y Masking - Blog Escola Espai","description":"Cararcteristicas principales y ejemplos del Clipping (recorte) y del Masking (enmascaramiento) en SVG. Utilizaci\u00f3n del los elementos clip-path y mask.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/","og_locale":"es_ES","og_type":"article","og_title":"SVG: Diferencias entre Clipping y Masking - Blog Escola Espai","og_description":"Cararcteristicas principales y ejemplos del Clipping (recorte) y del Masking (enmascaramiento) en SVG. Utilizaci\u00f3n del los elementos clip-path y mask.","og_url":"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/","og_site_name":"Blog Escola Espai","article_published_time":"2019-11-30T21:59:50+00:00","article_modified_time":"2020-07-06T10:53:27+00:00","og_image":[{"width":800,"height":359,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/BLOGHOME.png","type":"image\/png"}],"author":"Stephanie Guerrero","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Stephanie Guerrero","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/"},"author":{"name":"Stephanie Guerrero","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8"},"headline":"SVG: Diferencias entre Clipping y Masking","datePublished":"2019-11-30T21:59:50+00:00","dateModified":"2020-07-06T10:53:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/"},"wordCount":787,"commentCount":1,"image":{"@id":"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/BLOGHOME.png","articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/","url":"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/","name":"SVG: Diferencias entre Clipping y Masking - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/BLOGHOME.png","datePublished":"2019-11-30T21:59:50+00:00","dateModified":"2020-07-06T10:53:27+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8"},"description":"Cararcteristicas principales y ejemplos del Clipping (recorte) y del Masking (enmascaramiento) en SVG. Utilizaci\u00f3n del los elementos clip-path y mask.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/BLOGHOME.png","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/BLOGHOME.png","width":800,"height":359},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2019\/11\/svg-clipping-y-masking\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"SVG: Diferencias entre Clipping y Masking"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8","name":"Stephanie Guerrero","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g","caption":"Stephanie Guerrero"},"url":"https:\/\/www.espai.es\/blog\/author\/s-guerrero\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2019\/11\/BLOGHOME.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/9000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=9000"}],"version-history":[{"count":33,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/9000\/revisions"}],"predecessor-version":[{"id":9032,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/9000\/revisions\/9032"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/9054"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=9000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=9000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=9000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}