{"action":"created","comment":{"url":"https://api.github.com/repos/NoCountryForGeeks/Blog/pulls/comments/147654688","pull_request_review_id":72774971,"id":147654688,"diff_hunk":"@@ -0,0 +1,442 @@\n+![Cover Page](./images/CoverPage.svg)\n+\n+## Generando un sprite SVG en mi aplicacion React, performance y accesibilidad\n+\n+Con la llegada del estándar **HTML5** ha resurgido el formato **SVG** en el desarrollo web. **HTML5** reconoce el formato **SVG** como un estándar, lo que ha obligado a los navegadores a soportarlo de manera nativa.\n+\n+## ¿Que es SVG?\n+\n+SVG **(Scalable Vector Graphics)** es un formato vectorial que nos permite crear vectores escalables, esto nos permite agrandar y disminuir el tamaño de nuestras imágenes sin perder calidad. Una de las grandes ventajas de este formato es que tiene un tamaño reducido independientemente del tamaño de la imagen, este formato se exporta como XML.\n+\n+SVG nos permite usar tres tipos de vectores gráficos\n+*   Formas (líneas, círculos, polígonos, etc)\n+*\tImágenes\n+*\tTexto\n+\n+\n+## Como usar un SVG en la web\n+\n+En la web podemos usar **SVG** escribiendo directamente en el **HTML** las etiques que representen las formas **(rect, cicle, line, polygon,  etc)** o podemos usar ficheros **.svg** exportados desde editores gráficos como **Illustrator, Inkscape o sketch.**\n+\n+**Hay que tener en cuenta que no todas las maneras de usar un SVG los tratan como un gráfico vectorial y vamos a perder las ventajas que esto nos ofrece.**\n+\n+**Como imagen**  \n+```html\n+<img src=\"circle.svg\" alt=\"circle\" />\n+```\n+\n+**Como iframe** \n+```html\n+<iframe src=\"circle.svg\"></iframe>\n+```\n+\n+**Como objeto** \n+```html\n+<object data=\"circle.svg\"></object>\n+```\n+\n+**Embebido** \n+```html\n+<embed src=\"circle.svg\" />\n+```\n+\n+**Como fondo** \n+```html \n+<div class=\"circle\"></div>\n+\n+.circle {\n+        width: 200px;\n+        height: 200px;\n+        background: url('circle.svg');\n+    }\n+```\n+\n+\n+\n+**Como SVG** \n+```html\n+<svg>\n+    <circle cx=\"65\" cy=\"65\" r=\"65\"/>\n+</svg>\n+```\n+\n+Las única manera que lo mantiene como un gráfico vectorial es la etiqueta ``<svg>``\n+\n+## Ventajas de usar SVG\n+\n+*\tPodemos cambiar el color y el tamaño directamente con CSS incluso solo cambiar el color de partes específicas.\n+*\tNos ahorraremos peso de imágenes a la hora de descargar\n+*\tPodemos ahorrar peticiones al servidor si generamos un Sprite SVG\n+*\tNo perderemos calidad\n+\n+## Sprite SVG\n+\n+Un **sprite SVG** consiste en coger todos los **SVG** que contiene nuestra web y crear un único fichero **SVG** que los contenga a todos. Esto nos permite ahorrarnos múltiples llamadas al servidor lo que podría provocar bloqueo de llamadas por parte del navegador y ralentizaría nuestra carga de la web.\n+\n+Para generar un **sprite SVG** podemos realizarlo a mano (es un trabajo tedioso y en el que podemos equivocarnos) o usar tareas **gulp, grunt o webpack** para crearlos, estas tareas nos permiten configurar los plugins con los cuales podemos eliminar cosas innecesarias de nuestros **SVG** y que ocuparían espacio innecesario en el **sprite**.\n+\n+![Sprite SVG](./images/SpriteSVGProcess.svg)","path":"ivanrodri/generando-un-sprite-SVG-en-aplicacion-react-performance-y-accesibilidad/readme.md","position":78,"original_position":78,"commit_id":"d2be2fa087da09f3b0cef6b82f420f6aa3b551c4","original_commit_id":"d2be2fa087da09f3b0cef6b82f420f6aa3b551c4","user":{"login":"maktub82","id":7532021,"avatar_url":"https://avatars3.githubusercontent.com/u/7532021?v=4","gravatar_id":"","url":"https://api.github.com/users/maktub82","html_url":"https://github.com/maktub82","followers_url":"https://api.github.com/users/maktub82/followers","following_url":"https://api.github.com/users/maktub82/following{/other_user}","gists_url":"https://api.github.com/users/maktub82/gists{/gist_id}","starred_url":"https://api.github.com/users/maktub82/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/maktub82/subscriptions","organizations_url":"https://api.github.com/users/maktub82/orgs","repos_url":"https://api.github.com/users/maktub82/repos","events_url":"https://api.github.com/users/maktub82/events{/privacy}","received_events_url":"https://api.github.com/users/maktub82/received_events","type":"User","site_admin":false},"body":"svg to PNG or JPEG","created_at":"2017-10-30T09:46:15Z","updated_at":"2017-10-30T09:57:46Z","html_url":"https://github.com/NoCountryForGeeks/Blog/pull/6#discussion_r147654688","pull_request_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/pulls/6","author_association":"OWNER","_links":{"self":{"href":"https://api.github.com/repos/NoCountryForGeeks/Blog/pulls/comments/147654688"},"html":{"href":"https://github.com/NoCountryForGeeks/Blog/pull/6#discussion_r147654688"},"pull_request":{"href":"https://api.github.com/repos/NoCountryForGeeks/Blog/pulls/6"}}},"pull_request":{"url":"https://api.github.com/repos/NoCountryForGeeks/Blog/pulls/6","id":149467522,"html_url":"https://github.com/NoCountryForGeeks/Blog/pull/6","diff_url":"https://github.com/NoCountryForGeeks/Blog/pull/6.diff","patch_url":"https://github.com/NoCountryForGeeks/Blog/pull/6.patch","issue_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/issues/6","number":6,"state":"open","locked":false,"title":"New post: generando-un-sprite-SVG-en-aplicacion-react-performance-y-accesibilidad","user":{"login":"IvanRodriCalleja","id":22966198,"avatar_url":"https://avatars0.githubusercontent.com/u/22966198?v=4","gravatar_id":"","url":"https://api.github.com/users/IvanRodriCalleja","html_url":"https://github.com/IvanRodriCalleja","followers_url":"https://api.github.com/users/IvanRodriCalleja/followers","following_url":"https://api.github.com/users/IvanRodriCalleja/following{/other_user}","gists_url":"https://api.github.com/users/IvanRodriCalleja/gists{/gist_id}","starred_url":"https://api.github.com/users/IvanRodriCalleja/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/IvanRodriCalleja/subscriptions","organizations_url":"https://api.github.com/users/IvanRodriCalleja/orgs","repos_url":"https://api.github.com/users/IvanRodriCalleja/repos","events_url":"https://api.github.com/users/IvanRodriCalleja/events{/privacy}","received_events_url":"https://api.github.com/users/IvanRodriCalleja/received_events","type":"User","site_admin":false},"body":"New post: generando-un-sprite-SVG-en-aplicacion-react-performance-y-accesibilidad","created_at":"2017-10-30T09:06:24Z","updated_at":"2017-10-30T09:57:46Z","closed_at":null,"merged_at":null,"merge_commit_sha":"9642bd9ed730aad3659510b7038be1893237018a","assignee":null,"assignees":[],"requested_reviewers":[],"milestone":null,"commits_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/pulls/6/commits","review_comments_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/pulls/6/comments","review_comment_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/pulls/comments{/number}","comments_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/issues/6/comments","statuses_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/statuses/d2be2fa087da09f3b0cef6b82f420f6aa3b551c4","head":{"label":"NoCountryForGeeks:feature/spriteSvg","ref":"feature/spriteSvg","sha":"d2be2fa087da09f3b0cef6b82f420f6aa3b551c4","user":{"login":"NoCountryForGeeks","id":30403799,"avatar_url":"https://avatars2.githubusercontent.com/u/30403799?v=4","gravatar_id":"","url":"https://api.github.com/users/NoCountryForGeeks","html_url":"https://github.com/NoCountryForGeeks","followers_url":"https://api.github.com/users/NoCountryForGeeks/followers","following_url":"https://api.github.com/users/NoCountryForGeeks/following{/other_user}","gists_url":"https://api.github.com/users/NoCountryForGeeks/gists{/gist_id}","starred_url":"https://api.github.com/users/NoCountryForGeeks/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NoCountryForGeeks/subscriptions","organizations_url":"https://api.github.com/users/NoCountryForGeeks/orgs","repos_url":"https://api.github.com/users/NoCountryForGeeks/repos","events_url":"https://api.github.com/users/NoCountryForGeeks/events{/privacy}","received_events_url":"https://api.github.com/users/NoCountryForGeeks/received_events","type":"Organization","site_admin":false},"repo":{"id":99028346,"name":"Blog","full_name":"NoCountryForGeeks/Blog","owner":{"login":"NoCountryForGeeks","id":30403799,"avatar_url":"https://avatars2.githubusercontent.com/u/30403799?v=4","gravatar_id":"","url":"https://api.github.com/users/NoCountryForGeeks","html_url":"https://github.com/NoCountryForGeeks","followers_url":"https://api.github.com/users/NoCountryForGeeks/followers","following_url":"https://api.github.com/users/NoCountryForGeeks/following{/other_user}","gists_url":"https://api.github.com/users/NoCountryForGeeks/gists{/gist_id}","starred_url":"https://api.github.com/users/NoCountryForGeeks/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NoCountryForGeeks/subscriptions","organizations_url":"https://api.github.com/users/NoCountryForGeeks/orgs","repos_url":"https://api.github.com/users/NoCountryForGeeks/repos","events_url":"https://api.github.com/users/NoCountryForGeeks/events{/privacy}","received_events_url":"https://api.github.com/users/NoCountryForGeeks/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/NoCountryForGeeks/Blog","description":"Repositorio con los post del blog http://www.nocountryforgeeks.com","fork":false,"url":"https://api.github.com/repos/NoCountryForGeeks/Blog","forks_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/forks","keys_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/keys{/key_id}","collaborators_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/teams","hooks_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/hooks","issue_events_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/issues/events{/number}","events_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/events","assignees_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/assignees{/user}","branches_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/branches{/branch}","tags_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/tags","blobs_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/git/refs{/sha}","trees_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/git/trees{/sha}","statuses_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/statuses/{sha}","languages_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/languages","stargazers_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/stargazers","contributors_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/contributors","subscribers_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/subscribers","subscription_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/subscription","commits_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/commits{/sha}","git_commits_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/git/commits{/sha}","comments_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/comments{/number}","issue_comment_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/issues/comments{/number}","contents_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/contents/{+path}","compare_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/compare/{base}...{head}","merges_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/merges","archive_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/downloads","issues_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/issues{/number}","pulls_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/pulls{/number}","milestones_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/milestones{/number}","notifications_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/labels{/name}","releases_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/releases{/id}","deployments_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/deployments","created_at":"2017-08-01T17:50:19Z","updated_at":"2017-08-28T06:14:08Z","pushed_at":"2017-10-30T09:06:25Z","git_url":"git://github.com/NoCountryForGeeks/Blog.git","ssh_url":"git@github.com:NoCountryForGeeks/Blog.git","clone_url":"https://github.com/NoCountryForGeeks/Blog.git","svn_url":"https://github.com/NoCountryForGeeks/Blog","homepage":null,"size":7468,"stargazers_count":2,"watchers_count":2,"language":"C#","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":1,"forks":0,"open_issues":1,"watchers":2,"default_branch":"master"}},"base":{"label":"NoCountryForGeeks:master","ref":"master","sha":"223fe25701dd9200d434c560a66b23e134ac9cfa","user":{"login":"NoCountryForGeeks","id":30403799,"avatar_url":"https://avatars2.githubusercontent.com/u/30403799?v=4","gravatar_id":"","url":"https://api.github.com/users/NoCountryForGeeks","html_url":"https://github.com/NoCountryForGeeks","followers_url":"https://api.github.com/users/NoCountryForGeeks/followers","following_url":"https://api.github.com/users/NoCountryForGeeks/following{/other_user}","gists_url":"https://api.github.com/users/NoCountryForGeeks/gists{/gist_id}","starred_url":"https://api.github.com/users/NoCountryForGeeks/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NoCountryForGeeks/subscriptions","organizations_url":"https://api.github.com/users/NoCountryForGeeks/orgs","repos_url":"https://api.github.com/users/NoCountryForGeeks/repos","events_url":"https://api.github.com/users/NoCountryForGeeks/events{/privacy}","received_events_url":"https://api.github.com/users/NoCountryForGeeks/received_events","type":"Organization","site_admin":false},"repo":{"id":99028346,"name":"Blog","full_name":"NoCountryForGeeks/Blog","owner":{"login":"NoCountryForGeeks","id":30403799,"avatar_url":"https://avatars2.githubusercontent.com/u/30403799?v=4","gravatar_id":"","url":"https://api.github.com/users/NoCountryForGeeks","html_url":"https://github.com/NoCountryForGeeks","followers_url":"https://api.github.com/users/NoCountryForGeeks/followers","following_url":"https://api.github.com/users/NoCountryForGeeks/following{/other_user}","gists_url":"https://api.github.com/users/NoCountryForGeeks/gists{/gist_id}","starred_url":"https://api.github.com/users/NoCountryForGeeks/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NoCountryForGeeks/subscriptions","organizations_url":"https://api.github.com/users/NoCountryForGeeks/orgs","repos_url":"https://api.github.com/users/NoCountryForGeeks/repos","events_url":"https://api.github.com/users/NoCountryForGeeks/events{/privacy}","received_events_url":"https://api.github.com/users/NoCountryForGeeks/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/NoCountryForGeeks/Blog","description":"Repositorio con los post del blog http://www.nocountryforgeeks.com","fork":false,"url":"https://api.github.com/repos/NoCountryForGeeks/Blog","forks_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/forks","keys_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/keys{/key_id}","collaborators_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/teams","hooks_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/hooks","issue_events_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/issues/events{/number}","events_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/events","assignees_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/assignees{/user}","branches_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/branches{/branch}","tags_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/tags","blobs_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/git/refs{/sha}","trees_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/git/trees{/sha}","statuses_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/statuses/{sha}","languages_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/languages","stargazers_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/stargazers","contributors_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/contributors","subscribers_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/subscribers","subscription_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/subscription","commits_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/commits{/sha}","git_commits_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/git/commits{/sha}","comments_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/comments{/number}","issue_comment_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/issues/comments{/number}","contents_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/contents/{+path}","compare_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/compare/{base}...{head}","merges_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/merges","archive_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/downloads","issues_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/issues{/number}","pulls_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/pulls{/number}","milestones_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/milestones{/number}","notifications_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/labels{/name}","releases_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/releases{/id}","deployments_url":"https://api.github.com/repos/NoCountryForGeeks/Blog/deployments","created_at":"2017-08-01T17:50:19Z","updated_at":"2017-08-28T06:14:08Z","pushed_at":"2017-10-30T09:06:25Z","git_url":"git://github.com/NoCountryForGeeks/Blog.git","ssh_url":"git@github.com:NoCountryForGeeks/Blog.git","clone_url":"https://github.com/NoCountryForGeeks/Blog.git","svn_url":"https://github.com/NoCountryForGeeks/Blog","homepage":null,"size":7468,"stargazers_count":2,"watchers_count":2,"language":"C#","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"archived":false,"open_issues_count":1,"forks":0,"open_issues":1,"watchers":2,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/NoCountryForGeeks/Blog/pulls/6"},"html":{"href":"https://github.com/NoCountryForGeeks/Blog/pull/6"},"issue":{"href":"https://api.github.com/repos/NoCountryForGeeks/Blog/issues/6"},"comments":{"href":"https://api.github.com/repos/NoCountryForGeeks/Blog/issues/6/comments"},"review_comments":{"href":"https://api.github.com/repos/NoCountryForGeeks/Blog/pulls/6/comments"},"review_comment":{"href":"https://api.github.com/repos/NoCountryForGeeks/Blog/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/NoCountryForGeeks/Blog/pulls/6/commits"},"statuses":{"href":"https://api.github.com/repos/NoCountryForGeeks/Blog/statuses/d2be2fa087da09f3b0cef6b82f420f6aa3b551c4"}},"author_association":"NONE"}}
{"actor":{"display_login":"maktub82"}}