【SVGⅡ】用代码在公众号中画各种图形

不懂代码的运营不是好的产品。

一个运营人员可以不精通代码,但遇到的时候至少应该不是一味规避,这一两年在公众号交互上展露头角的 SVG 技术就很值得钻研。

或许你可以跟着我,写下人生中的第一行代码。

首先你需要一个代码编辑器,这里我用的是代码编辑器是 Visual Studio Code,你可以在网上搜索下载。

*请在官网或 Github 等可信渠道下载。

下载完成后,我们可以给 Visual Studio Code 安装插件「SVG」,方便我们接下来的编辑工作。

▲ 自动补足标签
▲ 实时预览

接下来尝试着在公众号内画一个矩形。

使用 Chrome 浏览器打开公众号后台并新建图文消息,输入任意字符,比如「任意」。在浏览器页面右击选择「审查元素/Inspect」,搜索到 「任意」——一个由 「P」标签包裹的代码段, 右击选择「Edit as HTML」,复制&粘贴下面的代码,替换原来的代码。

当然,你也可以 Chrome 浏览器提供的选择元素以审查(Select an element in the page to inspect it)的功能,直接点选 「任意」 文本。

<!-- 不指定具体数值的情况下,SVG宽高默认为300*150(px) -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <rect width="100" height="100" x="50" y="50" 
    style="fill:#ffff00; stroke-width:10; stroke:#ff0000;" />
</svg>
▲ 在公众号推文中的预览效果

在网站中也可以绘制 SVG 图形 ▼

除了 rect(矩形)、circle(圆形)之外,SVG 基本图形还包括 ellipse(椭圆形)、line(直线)、polyline(折线),polygon(多边形),更为复杂的图形需要通过 path(路径)绘制。如果我们需要做 SVG 动画,可以在 Visual Studio Code 上编辑完成后,再一次性通过浏览器注入微信公众号后台。

这里需要注意,所有的 SVG 图形标签既可以写成单标签,也可以写成双标签。

你也可以选择在线编辑 SVG

▲ 在线编辑SVG

更多图形的代码写法请见 【SVGⅢ 】画出所有你想要的图形(代码示例)

【SVGⅡ】用代码在公众号中画各种图形》有374条评论

  1. A fascinating discussion is definitely worth comment. I do think that you should publish more about this issue, it might not be a taboo subject but generally people don’t talk about these topics. To the next! Kind regards!!

  2. I will immediately seize your rss as I can’t find your email subscription hyperlink or newsletter service. Do you’ve any? Kindly permit me know in order that I may subscribe. Thanks.

  3. This is a good tip particularly to those new to the blogosphere.Short but very accurate information? Thank you for sharing this one.A must read article!Also visit my blog post: Kristal

  4. Hi, I do believe this is a great blog. I stumbledupon it I’m going to revisit yet again since I bookmarked it. Money and freedom is the best way to change, may you be rich and continue to help others.

  5. outdoor rv speakersThe products information we provide about “outdoor rv speakers not working” as followsHighly competitive AVT UTV Boat RV H-833 stereo marine system + Hasda 058 6.5″ waterproof Black white IP66 marine Speakers.

  6. wonderful post, very informative. I wonder why the other experts of this sector do not notice this. You should continue your writing. I’m confident, you have a great readers’ base already!

  7. These characteristics have made Discord a preferred app during the gaming communityDiscord Free Accounts 2021 Discord Account AndPasswordfree discord accounts

  8. That is a really good tip especially to those fresh to the blogosphere. Simple but very precise infoÖ Thanks for sharing this one. A must read post!

  9. Aw, this was an exceptionally good post. Spending some time and actual effort to create a good article… but what can I say… I put things off a whole lot and don’t seem to get anything done.

  10. Hey there! I just wanted to ask if you ever have any issues withhackers? My last blog (wordpress) was hacked and I ended up losing months of hard workdue to no data backup. Do you have any methods to protect against hackers?

  11. Hi there! I simply would like to offer you a huge thumbs up for your great info you have got here on this post. I’ll be returning to your site for more soon.

  12. This is my first time i visit here. I found so many helpful stuff in your website especially its discussion. From the tons of responses on your posts, I guess I am not the only one having all the enjoyment here! keep up the excellent work

  13. I have to say this post was certainly informative and contains useful content for enthusiastic visitors. I will definitely bookmark this website for future reference and further viewing. cheers a bunch for sharing this with us!

  14. Hey very cool site!! Man .. Beautiful .. Amazing .. I will bookmark your website and take the feeds also…I’m happy to find so many useful information here in the post, we need develop more strategies in this regard, thanks for sharing. . . . . .

  15. I think it is a nice point of view. I most often meet people who rather say what they suppose others want to hear. Good and well written! I will come back to your site for sure!

  16. I just couldnt leave your website before saying that I really enjoyed the useful information you offer to your visitors… Will be back often to check up on new stuff you post!

  17. Hi, I do believe this is a great website. I stumbledupon it 😉 I will return once again since i have book-marked it. Money and freedom is the best way to change, may you be rich and continue to help other people.

  18. An outstanding share! I have just forwarded this onto a colleague who was doing a little homework on this. And he actually ordered me breakfast simply because I found it for him… lol. So allow me to reword this…. Thank YOU for the meal!! But yeah, thanx for spending time to discuss this topic here on your site.

  19. Hello! I could have sworn I’ve been to this blog before but after looking at a few of the posts I realized it’s new to me. Nonetheless, I’m definitely pleased I found it and I’ll be bookmarking it and checking back regularly!

  20. คาสิโนออนไลน์เรียกว่ายุคนี้ใครๆจำเป็นต้องรู้จักเนื่องจากว่ากระแสตอบรับดีเยี่ยมๆในกรุ๊ปนักเสี่ยงดวงรุ่นใหม่ด้วยเหตุว่าเป็นที่รู้ดีว่าคาสิโนออนไลน์ง่าย สะดวก ปลอดภัยสุดๆยิ่ง UFABETที่เป็นเว็บเชื่อถือได้ยิ่งเชื่อถือได้ว่า จ่ายจริงไม่มีกั๊กเลยขอรับ

  21. Having read this I believed it was rather informative. I appreciate you spending some time and energy to put this article together. I once again find myself personally spending way too much time both reading and leaving comments. But so what, it was still worth it!

  22. Wonderful blog! I found it while browsing on Yahoo News.

    Do you have any tips on how to get listed in Yahoo
    News? I’ve been trying for a while but I never seem to get there!
    Cheers

  23. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get four emails with the same comment.Is there any way you can remove people from that service?Thanks a lot!

  24. Wonderful blog! I found it while surfing around on Yahoo News.Do you have any suggestions on how to get listed in Yahoo News?I’ve been trying for a while but I never seem to get there!CheersHere is my blog post :: 우리카지노

  25. When someone writes an article he/she keeps the idea of a user in his/her mind that how a user can be aware of it.Thus that’s why this post is outstdanding. Thanks!

  26. I absolutely love your blog and find most of your post’s to be precisely what I’m looking for.
    can you offer guest writers to write content to suit your needs?

    I wouldn’t mind composing a post or elaborating on a few of the subjects you write in relation to here.
    Again, awesome blog!

  27. I must thank you for the efforts you’ve put in writing this site. I am hoping to check out the same high-grade blog posts by you in the future as well. In truth, your creative writing abilities has inspired me to get my own, personal website now 😉

  28. Hi! I could have sworn I’ve been to this web site before but after browsing through many of the articles I realized it’s new to me. Anyhow, I’m definitely happy I found it and I’ll be bookmarking it and checking back often.

  29. Having read this I thought it was really informative. I appreciate you spending some time and energy to put this information together. I once again find myself personally spending a significant amount of time both reading and leaving comments. But so what, it was still worthwhile.

  30. Usually I do not read article on blogs, however I would like to say that this write-up very pressured me to try and do it! Your writing taste has been amazed me. Thank you, very nice article.

  31. I was very happy to uncover this web site. I want to to thank you for ones time for this particularly wonderful read!! I definitely enjoyed every bit of it and I have you book-marked to look at new things on your website.

  32. It’s actually a cool and helpful piece of info. I’m satisfied that you simplyshared this helpful information with us. Please keep us informed likethis. Thank you for sharing.

  33. Nice post. I learn something new and challenging on blogs I stumbleupon on a daily basis. It’s always helpful to read articles from other authors and use a little something from their sites.

  34. This is a very good tip especially to those fresh to the blogosphere. Short but very precise information… Appreciate your sharing this one. A must read article.

  35. This is the perfect website for anybody who hopes to understand this topic. You know so much its almost tough to argue with you (not that I personally would want to…HaHa). You definitely put a fresh spin on a subject that has been written about for decades. Great stuff, just great.

  36. I seriously love your blog.. Very nice colors & theme. Did you make this web site yourself? Please reply back as I’m wanting to create my own personal website and would love to find out where you got this from or what the theme is called. Appreciate it!

  37. The very next time I read a blog, I hope that it does not disappoint me just as much as this one. After all, I know it was my choice to read through, but I actually thought you would have something interesting to say. All I hear is a bunch of complaining about something that you could possibly fix if you were not too busy looking for attention.

  38. fantastic post, very informative. I wonder why more of the ther experts in the field do not break it down like this. You should continue your writing. I am confident, you have a great readers’ base already!

  39. You can definitely see your enthusiasm in the work you write.The world hopes for even more passionate writers such as you who aren’t afraid to say how theybelieve. All the time go after your heart.

  40. Thank you for every other fantastic article. Where else may anyone get that type of information in such an ideal method of writing? I’ve a presentation next week, and I am at the search for such info.

  41. Aw, this was an extremely nice post. Finding the time and actual effort to create a great article… but what can I say… I hesitate a whole lot and don’t manage to get nearly anything done.

  42. Wow that was strange. I just wrote an very long comment but after I clicked submit my comment didn’tshow up. Grrrr… well I’m not writing all that over again.Anyways, just wanted to say fantastic blog!

  43. Good day! I simply wish to give you a huge thumbs up for your great information you have here on this post. I’ll be returning to your site for more soon.

  44. I just couldn’t leave your web site prior to suggesting that I really enjoyed the standard info an individual supply to your guests? Is going to be again continuously in order to inspect new posts

  45. Good day! I could have sworn Iíve been to this blog before but after looking at some of the posts I realized itís new to me. Anyhow, Iím certainly pleased I discovered it and Iíll be book-marking it and checking back often!

  46. Good post. I study something more difficult on different blogs everyday. It’s going to always be stimulating to learn content material from other writers and observe a little bit one thing from their store. I’d prefer to use some with the content material on my blog whether you don’t mind. Natually I’ll give you a link in your web blog. Thanks for sharing.

  47. An interesting discussion is definitely worth comment. I believe that you ought to publish more about this topic, it may not be a taboo matter but usually people don’t speak about these issues. To the next! Best wishes!!

  48. Hi, I do think your web site might be having browser compatibility issues. Whenever I look at your blog in Safari, it looks fine however, if opening in IE, it has some overlapping issues. I simply wanted to provide you with a quick heads up! Other than that, great blog.

  49. I’m extremely impressed with your writing skills and alsowith the layout on your blog. Is this a paid theme ordid you modify it yourself? Either way keep up the excellent quality writing, it is rareto see a nice blog like this one today.

  50. Good day! Do you know if they make any plugins to assist with Search Engine Optimization? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good results. If you know of any please share. Cheers!

  51. I have read so many articles or reviews concerning the blogger lovers except thisparagraph is genuinely a fastidious article, keep it up.

  52. An interesting discussion is worth comment. I think that you need to write more on this topic, it may not be a taboo subject but generally people do not discuss such subjects. To the next! All the best!!

  53. Thank you for another informative blog. Where else could I get that type of information written in such an ideal way? I’ve a project that I’m just now working on, and I’ve been on the look out for such information.

  54. Hi, I do believe this is an excellent web site. I stumbledupon it 😉 I am going to return once again since i have saved as a favorite it. Money and freedom is the greatest way to change, may you be rich and continue to help others.

  55. Awsome info and right to the point. I am not sure if this is really the best place to ask but do you people have any thoughts on where to hire some professional writers? Thx

  56. Wow! This could be one particular of the most helpful blogs We’ve ever arrive across on this subject. Actually Magnificent. I am also an expert in this topic therefore I can understand your effort.

  57. wonderful points altogether, you just gained a brand new reader. What would you suggest about your submit that you simply made a few days ago? Any positive?

  58. Having read this I believed it was rather enlightening. I appreciate you spending some time and effort to put this informative article together. I once again find myself personally spending a significant amount of time both reading and posting comments. But so what, it was still worth it.

  59. I’m impressed, I have to admit. Rarely do I encounter a blog that’s both educative and engaging, and let me tell you, you have hit the nail on the head. The issue is an issue that too few folks are speaking intelligently about. I am very happy I came across this in my search for something concerning this.

发表评论

您的电子邮箱地址不会被公开。